拥有“位置：固定”（始终位于顶部）div 的最简单的 jQuery 方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/257250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the simplest jQuery way to have a 'position:fixed' (always at top) div?
提问by Timothy Khouri
I'm relatively new to jQuery, but so far what I've seen I like. What I want is for a div (or any element) to be across the top of the page as if "position: fixed" worked in every browser.
我对 jQuery 比较陌生，但到目前为止我所看到的都是我喜欢的。我想要的是一个 div（或任何元素）位于页面顶部，就好像“位置：固定”在每个浏览器中都有效。
I do not want something complicated. I do not want giant CSS hacks. I would prefer if just using jQuery (version 1.2.6) is good enough, but if I need jQuery-UI-core, then that's fine too.
我不想要复杂的东西。我不想要巨大的 CSS 黑客。如果只使用 jQuery（1.2.6 版）就足够了，我更喜欢，但如果我需要 jQuery-UI-core，那也没关系。
I've tried $("#topBar").scrollFollow(); <-- but that goes slow... I want something to appear really fixed.
我试过 $("#topBar").scrollFollow(); <-- 但这会变慢......我希望某些东西看起来真的很固定。
回答by nickf
Using this HTML:
使用此 HTML：
<div id="myElement" style="position: absolute">This stays at the top</div>
This is the javascript you want to use. It attaches an event to the window's scroll and moves the element down as far as you've scrolled.
这是您要使用的 javascript。它将一个事件附加到窗口的滚动条上，并将元素向下移动到您滚动的位置。
$(window).scroll(function() {
$('#myElement').css('top', $(this).scrollTop() + "px");
});
As pointed out in the comments below, it's not recommended to attach events to the scroll event - as the user scrolls, it fires A LOT, and can cause performance issues. Consider using it with Ben Alman's debounce/throttleplugin to reduce overhead.
正如下面的评论中所指出的，不建议将事件附加到滚动事件 - 当用户滚动时，它会触发很多，并可能导致性能问题。考虑将它与 Ben Alman 的debounce/throttle插件一起使用以减少开销。
回答by Timothy Khouri
Beautiful! Your solution was 99%... instead of "this.scrollY", I used "$(window).scrollTop()". What's even better is that this solution only requires the jQuery1.2.6 library (no additional libraries needed).
美丽的！你的解决方案是 99% ......而不是“this.scrollY”，我使用了“$(window).scrollTop()”。更好的是，这个解决方案只需要 jQuery1.2.6 库（不需要额外的库）。
The reason I wanted that version in particular is because that's what ships with MVC currently.
我特别想要那个版本的原因是因为这是目前 MVC 附带的。
Here's the code:
这是代码：
$(document).ready(function() {
$("#topBar").css("position", "absolute");
});
$(window).scroll(function() {
$("#topBar").css("top", $(window).scrollTop() + "px");
});
回答by Schmoove
For those browsers that do support "position: fixed" you can simply use javascript (jQuery) to change the position to "fixed" when scrolling. This eliminates the jumpiness when scrolling with the $(window).scroll(function()) solutions listed here.
对于那些支持“位置：固定”的浏览器，您可以在滚动时简单地使用 javascript (jQuery) 将位置更改为“固定”。这消除了使用此处列出的 $(window).scroll(function()) 解决方案滚动时的跳跃性。
Ben Nadel demonstrates this in his tutorial: Creating A Sometimes-Fixed-Position Element With jQuery
Ben Nadel 在他的教程中演示了这一点： 使用 jQuery 创建有时固定位置的元素
回答by Mac Attack
HTML/CSS Approach
HTML/CSS 方法
If you are looking for an option that does not require much JavaScript (and and all the problems that come with it, such as rapid scroll event calls), it is possible to gain the same behavior by adding a wrapper <div>and a couple of styles. I noticed much smoother scrolling (no elements lagging behind) when I used the following approach:
如果您正在寻找不需要太多 JavaScript 的选项（以及随之而来的所有问题，例如快速滚动事件调用），则可以通过添加包装器<div>和几种样式来获得相同的行为。当我使用以下方法时，我注意到滚动更平滑（没有元素落后）：
HTML
HTML
<div id="wrapper">
<div id="fixed">
[Fixed Content]
</div><!-- /fixed -->
<div id="scroller">
[Scrolling Content]
</div><!-- /scroller -->
</div><!-- /wrapper -->
CSS
CSS
#wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }
JS
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');?
});
Of course, this approach could be modified for scrolling regions that gain/lose content during runtime (which would result in addition/removal of scrollbars).
当然，这种方法可以针对在运行时获得/丢失内容的滚动区域进行修改（这将导致添加/删除滚动条）。
回答by tbranyen
For anyone still looking for an easy solution in IE 6. I created a plugin that handles the IE 6 position: fixed problem and is very easy to use: http://www.fixedie.com/
对于仍在 IE 6 中寻找简单解决方案的任何人。我创建了一个处理 IE 6 位置的插件：已修复问题并且非常易于使用：http: //www.fixedie.com/
I wrote it in an attempt to mimic the simplicity of belatedpng, where the only changes necessary are adding the script and invoking it.
我写它是为了模仿 belatedpng 的简单性，其中唯一需要的更改是添加脚本并调用它。
回答by tbranyen
In a project, my client would like a floating box in another div, so I use margin-top CSS property rather than top in order to my floating box stay in its parent.
在一个项目中，我的客户想要另一个 div 中的浮动框，因此我使用 margin-top CSS 属性而不是 top 以使我的浮动框留在其父级中。
