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

【问题标题】：Holding the div at the fixed x or y positon on scrolling - just testing在滚动时将 div 保持在固定的 x 或 y 位置 - 只是测试
【发布时间】：2013-01-16 08:20:20
【问题描述】：

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

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

示例图片

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

有什么想法吗？

【问题讨论】：

@popnoodles position:fixed 将导致 div 根本不滚动。例如，我希望我的header div 水平滚动，而不是垂直滚动。
这里有些模棱两可。水平滚动时标题会发生什么，垂直滚动时左窗格会发生什么？编辑。你刚刚在我打字的时候回答了这个问题。
哦...好吧，还有更多相关信息。
我已经编辑了这个问题。希望这会带来更多的清晰度！
好的。 jscroll 混淆了这个问题。让我们看看。

标签： javascript jquery html css jquery-jscrollpane

【解决方案1】：

您可以使用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();
});

您还应该将position:relative 添加到两个div（以将它们与顶部/左侧一起移动而不移动其他块）和z-index 到标题（使其溢出侧边栏）。

【讨论】：

【解决方案2】：

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

您需要查看 jsScroll 创建的 div .jspPane 的滚动位置，并偏移您的 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-index。

编辑

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

【讨论】：

@popnooldes 非常感谢。您的答案同样有帮助，但如果您使用 jScrollPane，我发现另一个答案更优雅。
我也是。我从未使用过它，只是弄清楚它在做什么，而不是查看是否有选项！