1

小提琴：http: //jsfiddle.net/DerNalia/88N4d/9/

我试图完成的行为：

  1. 如果有足够的空间放置侧边栏，则应将它们固定在页面上
  2. 如果没有足够的空间，侧边栏应该滚动
  3. 向下滚动并到达侧边栏的底部时，它应该停止滚动
  4. 向下滚动时，侧边栏也应向下滚动，直到到达侧边栏的底部
  5. 向上滚动并到达侧边栏的顶部时，它应该停止滚动
  6. 如果在内容滚动期间的任何时候，用户切换滚动方向，侧边栏也应与页面/内容的其余部分沿相同方向移动
  7. 向上滚动时，侧边栏也应该向上滚动，直到到达侧边栏的顶部
  8. 如果内容比侧边栏短，侧边栏应该仍然可以滚动 这是我遇到的问题

如何做到这一点，以便我可以检测到用户所需的预期滚动距离，而不是使用内容正文的实际滚动距离？可能还有另一种解决方案，但这是我现在能想到的。

我目前在 Mac 上使用 Chrome。

更新：

我注意到的一件事：在 Mac 上使用触控板会在边缘进行拉伸/有弹性的滚动恶作剧.. 这会弄乱这个 javascript 硬核。如果您向上弹起足够多的次数，则可以将侧边栏完全滚动到屏幕之外。鼠标滚轮滚动没有这个问题。

4

1 回答 1

0

我认为你最好定位列absolute，然后检查位置滚动并切换位置。

它变得相当复杂，因为如果两列都是固定的并且内容有规律的流动，滚动将会跳转。

我使用更简单的逻辑为您创建了一个解决方案：

var $win = $(window);
var $containers = $(".container").css('position','absolute');

// we need to force a height to the body for fixed positioning
$('body').css('minHeight', Math.max.apply( Math, $containers.map(function() {
    return $(this).height();
})));

$win.bind("resize scroll", function() {
    var scrolled = $win.scrollTop(),
        winheight = $win.height(),
        elheight = 0;
    $containers.each(function() {
        elheight = $(this).height();
        $(this).css('position', function() {
            if ( elheight > (winheight+scrolled) ) {
                $(this).css('top',0);
                return 'absolute';
            }
            $(this).css('top', Math.min(0, winheight-elheight));
            return 'fixed';
        });
    });
});

它应该满足您的要求。如果列短于窗口高度，或者如果 scrollTop 足够，则固定定位启动。

一个充满荣耀的演示：http: //jsfiddle.net/mb9qC/

于 2012-09-24T13:25:45.770 回答