固定位置侧边栏，停在页脚处
固定位置侧边栏，停在页脚处
提问于 2014-05-09 14:25:46
我在这里见过几次这个问题，但还没有找到一个很好的答案，所以我想我会再问一次。
我有一个侧边栏，它固定在文档顶部，它将元素从正常的html流中分离出来。
当我们滚动到底部，我的脚在那里，我希望侧边栏被推上与页脚。
HTML
<div id="content">
<div id="sidebar">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
<div id="footer">
<p>content of unspecified height</p>
<p>content of unspecified height</p>
<p>content of unspecified height</p>
<p>content of unspecified height</p>
</div>CSS
#content {
width: 800px;
margin: 0 auto;
position: relative;
}
#sidebar {
padding: 10px;
position: fixed;
top: 0;
}
#footer {
padding: 10px;
}JS
...?我想需要发生的是，当"content“div底部滚动到屏幕上时，JS会将侧栏位置切换到绝对或相对于该div底部，这样它就可以回到正常流。但我愿意接受对最佳方法的建议。
编辑:哦，是的，当页面回滚时，侧边栏将需要返回到固定的顶部位置--以防万一不是很明显:)
对于JS和JQuery来说，这仍然是一个新问题，这也是一些现有的答案没有为我点击的另一个原因。
谢谢您的意见！如果我需要澄清或纠正什么，请告诉我。
回答 1
Stack Overflow用户
发布于 2014-05-09 14:37:54
您可能需要一个比较页脚顶部和窗口底部的$(window).on('scroll')函数。Psuedo代码：
//Make the height of side nav shrink as we scroll past the footer
var intPos = TopOfFooter - BottomOfWindow
If (intPos < 0) {
var newHeight = $(window).height() + intPos // intPos is negative so will take away
$('#sidebar').height(newHeight);
} else {
$('#sidebar').height('100%');
}或者类似的东西..。
编辑
FYI：
var TopOfFooter = $('#footer').offset().top;
var BottomOfWindow = $(window).scrollTop() + $(window).height();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23567085
复制相关文章
相似问题
腾讯云开发者
