javascript - 在滚动时将div保持在固定的x或y位置-只是测试

我正在使用jQuery和CSS创建时间线界面。我正在使用jScrollPane对其进行滚动。
我有


parent div，它包装了所有div，并在其上应用了jScrollPane
header div在垂直滚动时应固定，但在水平滚动时滚动并
leftpane div应该在水平滚动时固定，但是在垂直滚动时滚动


样本图片



JSFiddle链接：http://jsfiddle.net/gACZ8/4/

有任何想法吗？

最佳答案

您可以使用jscrollpane events。

演示：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();
});

另外，您还应该在两个div中添加position:relative（以便在顶部/左侧移动它们而不移动其他块），并且在标题中添加z-index（以使其溢出侧栏）。