jquery - 固定/跟随侧边栏的问题

Question

我正在尝试创建一个侧边栏，当用户向下滚动页面时，该侧边栏会跟随用户，并且我设法使用以下代码实现了效果:

标记

<div id="contentWrapper">
    <div id="lcWrapper">
        <div class="editor_left" id="leftColumn" data-id="">
        </div>
    </div>
    <!-- other divs (central and right column) -->
    <div style="clear: both;"></div>
</div>

Javascript

var $sidebar   = $("#leftColumn"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            }, 300);
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            }, 300);
        }
    });

它工作得很好，但我仍然有一个问题:当我向下滚动页面时，如果我到达页面末尾，侧边栏应该停止跟随我；这段代码发生的情况是，当我到达页面末尾时，它的容器被“拉伸(stretch)”(其高度增加)，而不是仅仅阻止侧边栏进一步向下移动，并且我可以继续向下滚动(实际上)我实际上无法到达页面末尾，因为当我向下滚动时总是会添加一些额外的空间)。

希望你能明白这个问题，我不知道我是否说得足够清楚。我知道这可以通过检查滚动事件处理程序中列的位置和高度来解决，但我希望有一个使用 CSS 设置的简单解决方案？

有什么帮助吗？

Answer 1

我不知道为什么你从可以使用像 #leftColumn {position:fixed;top:0;} 这样的纯 css 解决方案的那一刻起就选择了 jQuery 解决方案 你可以找到有关 css 的更多信息位置和固定值位于 http://www.w3.org/TR/CSS2/visuren.html#propdef-position

您可以在此处找到上述 css 建议的示例:http://jsbin.com/onefa4