1

我正在使用 jQuery 和 CSS 创建时间线界面。我正在使用 jScrollPane 来滚动它。我有

  • parentdiv 包含所有 div 并在其上应用 jScrollPane
  • headerdiv 应该在垂直滚动时固定，但在水平滚动时滚动并且
  • leftpanediv应该在水平滚动时固定，但在垂直滚动时滚动

示例图像

示例图像

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

有任何想法吗？

4

2 回答 2

2

您可以使用jscrollpane 事件。

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

此外，您应该添加position:relative到两个 div（以在不移动其他块的情况下将它们移动到顶部/左侧）和z-index标题（使其溢出侧边栏）。

于 2013-01-16T00:18:13.380 回答
1

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

您需要查看 .jspPanejsScroll 创建的 div 的滚动位置，并偏移 div 的位置。

$(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')));
  });
});

请注意，您的 header 和 leftcol 需要绝对定位，否则它们将与它们一起推送页面内容，这意味着您的页面必须具有避免这些 div 的边距，并且您需要注意 z-indexes。

编辑

或使用 jscrollpane 事件（请参阅其他答案）。我以前从未使用过jscrollpane！

于 2013-01-16T00:20:20.473 回答