$(window).scroll(function(){
$("#theFixed").css("bottom",Math.max(0,250-$(this).scrollTop()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:250px;background-color:red">SOMETHING</div>
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>
...几乎可以正常工作,但是 theFixed
的高度在滚动时会发生变化,我该如何解决?
编辑:也许我不清楚,我不需要将内容固定在“窗口”或外部容器的底部,我可以为此使用 CSS。
最佳答案
您可以使用 CSS height
属性显式设置所需的高度:
$(window).scroll(function() {
$("#theFixed").css("bottom", Math.max(0, 250 - $(this).scrollTop()));
});
#theFixed {
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:250px;background-color:red">SOMETHING</div>
STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>STUFF
<BR>
此外,与您的问题无关,但作为一般建议:当您为 scroll
、resize
等事件注册事件监听器时,您通常还希望 < em>debounce 事件处理程序的执行,以便 UI 保持对其他类型事件的响应。
更多关于 event debouncing .
关于jquery - 内容固定在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14360834/