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);
        }
    });

它工作得很好但我仍有问题：当我向下滚动页面时，如果我到达页面末尾，侧边栏应该停止跟踪我;这段代码发生的事情是，当我到达页面末尾时，不是仅仅停止侧边栏向下移动，而是让它的容器“拉伸”（它的高度增加），我可以继续向下滚动我想要的东西（实际上我不能实际到达页面的末尾，因为当我向下滚动时总会添加一些额外的空间。

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

任何帮助？

Answer 1

我不确定您为什么选择jQuery解决方案，因为您可以使用纯{c}解决方案，例如#leftColumn {position:fixed;top:0;}您可以在position找到有关css fixed和{{1}}值的更多信息{3}}

您可以在此处找到上述css建议的示例：http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Answer 2

如果你绝对放置侧边栏（position：absolute），并且容器（最近的父级，＃ccrapper和/或#contentWrapper）有位置：relative）有默认溢出（溢出：静态），容器大小不应该更改，侧边栏应保持可见。在这种情况下，您将为CSS顶级属性设置动画（如top：300px）。

在这种情况下，CSS应该类似于

#contentWrapper {position:relative;}
#leftColumn {position:absolute; top: 100px;}

固定/后续侧边栏的问题

2 个答案: