当一个div被滚动到屏幕顶部时，我如何才能将它固定在屏幕顶部呢？

Question

当一个div被滚动到屏幕顶部时，我如何才能将它固定在屏幕顶部呢？

我想要创建一个div，它位于一个内容块下面，但是一旦页面被滚动到足以与其顶部边界联系起来，就会固定在适当的位置，并与页面一起滚动。

Answer 1

您可以简单地使用css，将元素定位为固定:.fixedElement&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#c0c0c0; &nbsp;&nbsp;&nbsp;&nbsp;position:fixed; &nbsp;&nbsp;&nbsp;&nbsp;top:0; &nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;z-index:100;}编辑：您应该拥有绝对位置的元素，一旦滚动偏移量到达元素，它应该被更改为固定的，顶部位置应该设置为零。控件可以检测文档的顶部滚动偏移量。滚动顶职能：$(window).scroll(function(e){&nbsp; &nbsp;&nbsp;var&nbsp;$el&nbsp;=&nbsp;$('.fixedElement');&nbsp; &nbsp;&nbsp;var&nbsp;isPositionFixed&nbsp;=&nbsp;($el.css('position')&nbsp;==&nbsp;'fixed'); &nbsp;&nbsp;if&nbsp;($(this).scrollTop()&nbsp;>&nbsp;200&nbsp;&&&nbsp;!isPositionFixed){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;$el.css({'position':&nbsp;'fixed',&nbsp;'top':&nbsp;'0px'});&nbsp; &nbsp;&nbsp;} &nbsp;&nbsp;if&nbsp;($(this).scrollTop()&nbsp;<&nbsp;200&nbsp;&&&nbsp;isPositionFixed){ &nbsp;&nbsp;&nbsp;&nbsp;$el.css({'position':&nbsp;'static',&nbsp;'top':&nbsp;'0px'});&nbsp; &nbsp;&nbsp;}&nbsp;});当滚动偏移量达到200时，元素将棍子到浏览器窗口的顶部，因为是以固定的方式放置的。

Answer 2

你已经在Google代码上看到了这个例子问题页以及(直到最近)堆栈溢出的编辑页面。CMS的答案不会在你向上滚动时恢复定位。下面是堆栈溢出中无耻的被盗代码：function&nbsp;moveScroller()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$anchor&nbsp;=&nbsp;$("#scroller-anchor"); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$scroller&nbsp;=&nbsp;$('#scroller'); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;move&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;st&nbsp;=&nbsp;$(window).scrollTop(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ot&nbsp;=&nbsp;$anchor.offset().top; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(st&nbsp;>&nbsp;ot)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scroller.css({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;"fixed", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;"0px" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$scroller.css({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;"relative", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;"" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;$(window).scroll(move); &nbsp;&nbsp;&nbsp;&nbsp;move();}<div&nbsp;id="sidebar"&nbsp;style="width:270px;">&nbsp; &nbsp;&nbsp;<div&nbsp;id="scroller-anchor"></div>&nbsp; &nbsp;&nbsp;<div&nbsp;id="scroller"&nbsp;style="margin-top:10px;&nbsp;width:270px">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Scroller&nbsp;Scroller&nbsp;Scroller&nbsp;&nbsp;</div></div><script&nbsp;type="text/javascript">&nbsp; &nbsp;&nbsp;$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;moveScroller(); &nbsp;&nbsp;});</script>一个简单的现场演示.一个新的、没有脚本的替代方案是position: sticky，它在Chrome、Firefox和Safari中得到了支持。见关于HTML 5岩石的文章和演示，和Mozilla博士.