什么是最简单的jQuery方式有一个“位置：固定”（总是在顶部）div？
我相对较新的jQuery，但到目前为止，我见过我喜欢。 我想要的是一个div（或任何元素）跨页面的顶部，就好像“position：fixed”在每个浏览器中工作。
我不想要一些复杂的东西。 我不想要巨大的CSS黑客。 我宁愿如果只使用jQuery（版本1.2.6）是足够好，但如果我需要jQuery-UI-core，那也没关系。
我试过$（“＃topBar”）。scrollFollow（）; < – 但是这个速度很慢…我想要一些东西看起来确实是固定的。
使用这个HTML：
<div id="myElement" style="position: absolute">This stays at the top</div> 这是您要使用的JavaScript。 它将一个事件附加到窗口的滚动，并将元素向下移动，直到您滚动。
$(window).scroll(function() { $('#myElement').css('top', $(this).scrollTop() + "px"); });
正如在下面的评论中所指出的那样，不build议将事件附加到滚动事件 – 当用户滚动时，它会激发一个LOT，并可能导致性能问题。 考虑使用Ben Alman的debounce / throttle插件来减less开销。
对于支持“position：fixed”的浏览器，您可以简单地使用javascript（jQuery）在滚动时将位置更改为“fixed”。 当使用此处列出的$（window）.scroll（function（））解决scheme进行滚动时，可以消除跳动。
Ben Nadel在他的教程中演示了这个： 使用jQuery创build一个有时是固定位置的元素
美丽！ 你的解决scheme是99％…而不是“this.scrollY”，我用“$（window）.scrollTop（）”。 更好的是，这个解决scheme只需要jQuery1.2.6库（不需要额外的库）。
我特别想要这个版本的原因是因为这就是目前MVC所附带的。
代码如下：
$(document).ready(function() { $("#topBar").css("position", "absolute"); }); $(window).scroll(function() { $("#topBar").css("top", $(window).scrollTop() + "px"); });
HTML / CSS方法
如果您正在寻找一个不需要太多JavaScript的选项（以及与之相伴随的所有问题，例如快速滚动事件调用），可以通过添加一个包装器<div>和一对夫妇来获得相同的行为的风格。 当我使用以下方法时，我注意到更平滑的滚动（没有元素滞后）：
JS小提琴
HTML
<div id="wrapper"> <div id="fixed"> [Fixed Content] </div><!-- /fixed --> <div id="scroller"> [Scrolling Content] </div><!-- /scroller --> </div><!-- /wrapper -->
CSS
#wrapper { position: relative; } #fixed { position: fixed; top: 0; right: 0; } #scroller { height: 100px; overflow: auto; }
JS
//Compensate for the scrollbar (otherwise #fixed will be positioned over it). $(function() { //Determine the difference in widths between //the wrapper and the scroller. This value is //the width of the scroll bar (if any). var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth; //Set the right offset $('#fixed').css('right', offset + 'px'); });
当然，这种方法可以修改滚动区域，在运行时增加/减less内容（这将导致添加/删除滚动条）。
对于仍然在IE 6中寻找简单解决scheme的人来说，我创build了一个处理IE 6位置的插件：已修复的问题，并且非常易于使用： http : //www.fixedie.com/
我试图模仿belatedpng的简单性，在这里只需要添加脚本并调用它就可以了。
在一个项目中，我的客户想在另一个div中使用浮动框，所以我使用margin-top CSS属性而不是顶部，以便将浮动框保留在其父项中。
