Search code examples
javascriptjqueryhtmlcssjquery-jscrollpane

Holding the div at the fixed x or y positon on scrolling - just testing

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

Sample image

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

Any ideas?

Solution

  • 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).