我知道div的定位(固定,绝对和相对).我可以将固定的div附加到身体上,以便在滚动身体时它会粘到相同的位置.我在这里问一个不同的问题.
我有一个高度超过视口高度的侧边栏,我希望它固定在身体上.滚动身体时,它也应该滚动但是一旦固定div的底部可见,它就不应该与身体一起滚动.
例如,Facebook墙的右侧边栏与主体一起滚动,一旦右侧边栏的底部可见(固定),就会停止与主体一起滚动.
解决方法
这可以通过将侧边栏置于绝对位置并在窗口滚动位置通过底部时将其更改为固定.
CSS：
#sidebar {
height: 120%;
width: 100px;
border: 2px solid blue;
padding: 20px;
margin: 20px;
position: absolute;
top: 0;
}
jQuery：
$(document).ready(function() {
var bottomPos = $('#sidebar').outerHeight(true) - $(window).height();
$(window).scroll( function() {
if ( $(window).scrollTop() > bottomPos ) {
$('#sidebar').css({'position':'fixed','top':'auto','bottom':'0px'});
} else {
$('#sidebar').css({'position':'absolute','top':'0px'});
}
});
});
和a demo.