我正在尝试创建一个侧边栏,当他向下滚动页面时跟随用户,我设法使用以下代码完成效果:
标记
<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设置的简单解决方案?
任何帮助?
答案 0 :(得分:3)
我不确定您为什么选择jQuery解决方案,因为您可以使用纯{c}解决方案,例如#leftColumn {position:fixed;top:0;}
您可以在position
找到有关css fixed
和{{1}}值的更多信息{3}}
您可以在此处找到上述css建议的示例:http://www.w3.org/TR/CSS2/visuren.html#propdef-position
答案 1 :(得分:0)
如果你绝对放置侧边栏(position:absolute),并且容器(最近的父级,#ccrapper和/或#contentWrapper)有位置:relative)有默认溢出(溢出:静态),容器大小不应该更改,侧边栏应保持可见。在这种情况下,您将为CSS顶级属性设置动画(如top:300px)。
在这种情况下,CSS应该类似于
#contentWrapper {position:relative;}
#leftColumn {position:absolute; top: 100px;}