div屏幕滚动后的容器

Question

我想在我的一个页面上设置一个“向后兼容”的滚动侧边栏。

我有一个页面，其中包含有关鱼类的信息，这些鱼的长度非常长，并伴随着它的图像。

目前，图片位于右侧窗格中，我希望他们在用户滚动到页面底部时跟踪用户。

我使用了以下代码并取得了一些成功：

jQuery().ready(function($) {
    var $scrollingDiv = $("#sidebar");

    $(window).scroll(function(){            
        $scrollingDiv
            .stop()
            .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
    });
});

但是当向下滚动时它跳得太远了。

（原始位置）

（滚动单个鼠标滚轮）

当你开始向下滚动页面时，侧边栏会出现在中间位置的左右，因此你只能看到两张图像。

一旦用户滚过X点（比如400px），我希望侧边栏开始随页面移动。但是，当用户再次到达页面顶部时，它还需要返回其原始位置。

是否有可以应用于此代码的修复程序，或更好的方法来解决此问题？

---------------------------------------------------------------------------------

编辑：position:fixed问题

当我尝试根据Josh和David的建议（任何一些JS代码）应用position:fixed时，会发生这种情况：

这是Firebug读取附加到此元素的CSS样式：

Answer 1

您应该尝试在 this tutorial 中找到的jQuery代码，该代码会复制Apple的购物车边栏。它有一个工作演示和非常小的代码足迹。

Answer 2

你可以使用一个插件，但这是一个如此简单的任务，你可以自己做。

考虑这个简单的标记：

<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>

这将是您需要的所有JavaScript：

var el = $('#sidebar'),
    pos = el.position().top;

$(window).scroll(function() {
    el.toggleClass('fixed', $(this).scrollTop() >= pos);
});

现在，只要用户滚动得比侧边栏更远，它就会向#sidebar div添加一个类，所以你现在需要的只是som CSS。我正在将固定定位应用于子元素以避免布局问题：

#sidebar.fixed > div{position:fixed;}

我在这里提出了一个非常简单的演示：http://jsfiddle.net/QZyH3/

Answer 3

为什么不使用css position: fixed;属性？当然，如果你不介意div不顺畅但直接跟随你的scrollTop。我发现它现在只在IE6中工作了 - 所以使用固定位置是我认为的一个很好的解决方案，否则你只需使用windows的window.scrollTop并将其分配给元素的绝对位置顶部