Javascript 如果向下滚动通过它，则有一个 div 紧贴屏幕顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2907367/
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
Have a div cling to top of screen if scrolled down past it
提问by Alex
I have a div which, when my page is first loaded, is about 100px from the top (it holds some buttons etc. for the page).
我有一个 div，当我的页面第一次加载时，它离顶部大约 100 像素（它包含页面的一些按钮等）。
When a user scrolls past it, I would like the div to "follow" the user in that it attaches to the top of the screen. When the user returns to the top of the page, I want it back in its original position.
当用户滚动通过它时，我希望 div“跟随”用户，因为它附加到屏幕顶部。当用户返回页面顶部时，我希望它回到原来的位置。
Visualization - xxxxx is the div:
Default (page load) User vertically scrolled well past it
--------- ---------
| | |xxxxxxx| < after div reaches top of screen when
|xxxxxxx| | | page is scrolled vertically, it stays
| | | | there
--------- ---------
回答by adamJLev
The trick is that you have to set it as position:fixed, but only after the user has scrolled past it.
诀窍是你必须将它设置为 position:fixed，但只有在用户滚动通过它之后。
This is done with something like this, attaching a handler to the window.scroll event
这是通过这样的事情完成的，将处理程序附加到 window.scroll 事件
// Cache selectors outside callback for performance.
var $window = $(window),
$stickyEl = $('#the-sticky-div'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
This simply adds a stickyCSS class when the page has scrolled past it, and removes the class when it's back up.
这只是sticky在页面滚动经过它时添加一个CSS 类，并在它备份时删除该类。
And the CSS class looks like this
CSS 类看起来像这样
#the-sticky-div.sticky {
position: fixed;
top: 0;
}
EDIT- Modified code to cache jQuery objects, faster now.
编辑 - 修改代码以缓存 jQuery 对象，现在更快。
回答by Rafvs
The trick to make infinity's answer work without the flickering is to put the scroll-check on another div then the one you want to have fixed.
使无穷大的答案在没有闪烁的情况下工作的技巧是将滚动检查放在另一个 div 上，然后是您想要修复的那个。
Derived from the code viixii.comuses I ended up using this:
源自viixii.com使用的代码，我最终使用了这个：
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#sticky-element').addClass('sticky');
else
$('#sticky-element').removeClass('sticky');
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
This way the function is only called once the sticky-anchor is reached and thus won't be removing and adding the '.sticky' class on every scroll event.
这样，该函数仅在到达粘性锚点时才被调用，因此不会在每个滚动事件上删除和添加“.sticky”类。
Now it adds the sticky class when the sticky-anchor reaches the top and removes it once the sticky-anchor return into view.
现在，它在粘性锚到达顶部时添加粘性类，并在粘性锚返回视图后将其删除。
Just place an empty div with a class acting like an anchor just above the element you want to have fixed.
只需在您想要修复的元素上方放置一个空的 div，该 div 的作用就像一个锚点。
Like so:
像这样：
<div id="sticky-anchor"></div>
<div id="sticky-element">Your sticky content</div>
All credit for the code goes to viixii.com
代码的所有功劳都归于 viixii.com
回答by Andrew
There was a previous question today(no answers) that gave a good example of this functionality. You can check the relevant source code for specifics(search for "toolbar"), but basically they use a combination of webdestroya's solution and a bit of JavaScript:
今天有一个以前的问题（没有答案）给出了这个功能的一个很好的例子。您可以查看相关源代码以了解详细信息（搜索“工具栏”），但基本上它们结合使用了 webdestroya 的解决方案和一些 JavaScript：
- Page loads and element is position: static
- On scroll, the position is measured, and if the element is position: static and it's off the page then the element is flipped to position: fixed.
- 页面加载和元素位置：静态
- 在滚动时，测量位置，如果元素是 position: static 并且它不在页面上，那么元素将翻转到 position: fixed。
I'd recommend checking the aforementioned source code though, because they do handle some "gotchas" that you might not immediately think of, such as adjusting scroll position when clicking on anchor links.
不过，我建议检查上述源代码，因为它们确实处理了一些您可能不会立即想到的“问题”，例如在单击锚链接时调整滚动位置。
回答by Mitch Dempsey
Use position:fixed;and set the top:0;left:0;right:0;height:100px;and you should be able to have it "stick" to the top of the page.
使用position:fixed;并设置top:0;left:0;right:0;height:100px;，您应该能够让它“粘”到页面顶部。
<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>
