Question

I am creating a timeline interface using jQuery and CSS. I am using jScrollPane for scrolling it.
I have

• parent div which wraps all the div and on which jScrollPane is applied
• header div should be fixed while scrolling vertically, but scroll when scrolled horizontally and
• leftpane div should be fixed while scrolling horizontally, but scroll when scrolled vertically

Sample Image

JSFiddle Link : http://jsfiddle.net/gACZ8/4/

Any ideas?

Answer 1

You can use jscrollpane events.

Demo: http://jsfiddle.net/gACZ8/10/

$(document).ready(function() {
  $('#parent')
    .bind('jsp-scroll-y',
      function(event, scrollPositionY, isAtTop, isAtBottom) {
        $(".header").css("top", scrollPositionY);
      }
    )
    .bind('jsp-scroll-x',
      function(event, scrollPositionX, isAtLeft, isAtRight) {
        $(".lefter").css("left", scrollPositionX);
      }
    )
    .jScrollPane();
});

Also you should add position:relative to both divs (to move them with top/left without moving other blocks) and z-index to header (to make it overflow sidebar).