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

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

Any ideas?

回答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).

回答2:

http://jsfiddle.net/gACZ8/11/

You need to look at the scroll positions of .jspPane which is the div jsScroll creates, and offset the positions of your divs.

$(document).ready(function() {
  $('#parent').jScrollPane();
  $('#parent').on('scroll', function(){
    var jspPane=$(this).find('.jspPane');
    $('.lefter').css('left', 0-parseFloat(jspPane.css('left')));
    $('.header').css('top', 0-parseFloat(jspPane.css('top')));
  });
});

NB your header and leftcol need to be positioned absolutely otherwise they'll push the page contents with them, which means your page has to have margins that avoid these divs, and you need to take care of your z-indexes.

EDIT

Or use jscrollpane events (see other answer). I have never used jscrollpane before!

来源：https://stackoverflow.com/questions/14349192/holding-the-div-at-the-fixed-x-or-y-positon-on-scrolling-just-testing