这是我的第一篇文章,请耐心等一下.
在搜索无处不在解决这个问题,并试图使用一些插件,如jQuery Way-points,没有任何成功,我希望有人能够提供一个解决方案.
由于使用文字解释有点复杂,我已经创建了一个行为图.
根据内容,所有元素的高度可变.
具有比页面内容短得多的边栏,
>一旦边栏div的底部进入视口,
>它将保持固定在该位置,而其余的内容将继续滚动正常.
>直到侧边栏到达页脚,在那里它将向上滚动,页脚正常.
感谢您的帮助提前.
解决方法
Here是我的解决方案.您可以使用此示例并实现自己的解决方案来解决您的问题.
HTML：
<div id="header">
header
</div>
<div id="left">
Donec placerat. Nullam nibh dolor,blandit sed,fermentum id,imperdiet sit amet,neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu,eleifend sit amet,gravida eget,porta at,wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem,gravida in,feugiat ac,molestie eget,wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh,ullamcorper eget,pulvinar sed,posuere vitae,nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum,pretium quis,dapibus sed,varius non,lectus. Proin a quam. Praesent lacinia,eros quis aliquam porttitor,urna lacus volutpat urna,ut fermentum neque mi egestas dolor.
Donec placerat. Nullam nibh dolor,ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor,ut fermentum neque mi egestas dolor.
</div>
<div id="right">
Donec placerat. Nullam nibh dolor,wisi. Fusce consectetuer luctus ipsum. amet,wisi. Nam non 000000000 lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem,wisi. Fusce consectetuer luctus ipsum.
</div>
<div id="footer">
footer
</div>
CSS：
body { position: relative; }
#header { width: 100%; height: 100px; background: #f00; margin-bottom: 10px; }
#left { width: 75%; background: #f00; float: left; margin-bottom: 10px; }
#right { width: 20%; background: #00f; float: right; position: relative; right: 0; }
#footer { clear: both; width: 100%; height: 100px; background: #f00; }
最后Javascript
function scrollCheck() {
var $right = $('#right'),scrollTop = $(window).scrollTop(),windowHeight = $(window).height(),docHeight = $(document).height(),rightHeight = $right.height(),distanceToTop = rightHeight + 110 - windowHeight,distanceToBottom = scrollTop + windowHeight + 110 - docHeight;
if (scrollTop > distanceToTop) {
$right.css({
'position': 'fixed','bottom': (scrollTop + windowHeight + 110 > docHeight ? distanceToBottom + 'px' : '0px')
});
}
else {
$right.css({
'position': 'relative','bottom': 'auto'
});
}
}
$(window).bind('scroll',scrollCheck);
