jquery - 内容固定在底部

Question

$(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。

Answer 1

您可以使用 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 .