如何让 div 在滚动到屏幕顶部后粘在屏幕顶部？
我想创建一个 div，它位于内容块下方，但是一旦页面滚动到足以接触其顶部边界，它就会固定在适当的位置并随页面滚动。
I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（27）
不是一个精确的解决方案，而是考虑的一个很好的替代方案
CSS ONLY Top of screen滚动条。 使用仅CSS解决了所有问题，没有 JavaScript，没有 JQuery，没有脑力劳动（哈哈）。
享受 我的小提琴 :D 所有代码都包含在其中:)
CSS
将内容放得足够长，以便您可以在这里看到效果:)
哦，参考资料也在那里，因为他值得 他的功劳
CSS 仅屏幕顶部滚动条
Not an exact solution but a great alternative to consider
this CSS ONLY Top of screen scroll bar. Solved all the problem with ONLY CSS, NO JavaScript, NO JQuery, No Brain work (lol).
Enjoy my fiddle :D all the codes are included in there :)
CSS
Put the content long enough so you can see the effect here :)
Oh, and the reference is in there as well, for the fact he deserve his credit
CSS ONLY Top of screen scroll bar
接受的答案有效，但如果您滚动到它上面，则不会移回之前的位置。 放在上面后总是粘在上面。
jleedev 的回应应该有效，但我无法让它发挥作用。 他的示例页面也不起作用（对我来说）。
The accepted answer works but doesn't move back to previous position if you scroll above it. It is always stuck to the top after being placed there.
jleedev's response whould work, but I wasn't able to get it to work. His example page also didn't work (for me).
粘性直到页脚碰到 div：
sticky till the footer hits the div:
您所要做的就是
position:fixed;和top: 0px;就这么简单。 我在我的网络应用程序中使用它。All you have to do is
position: fixed;andtop: 0px;Its so simple. I use it in my web app.您可以添加 3 行额外的行，这样当用户滚动回顶部时，div 将停留在原来的位置：
代码如下：
You can add 3 extra rows so when the user scroll back to the top, the div will stick on its old place:
Here is the code:
我在 div 中设置了链接，因此它是字母和数字链接的垂直列表。
然后，我设置这个方便的 jQuery 函数来保存加载的位置，然后在滚动超出该位置时将位置更改为固定。
注意：仅当链接在页面加载时可见时才有效！
I have links setup in a div so it is a vertical list of letter and number links.
I then setup this handy jQuery function to save the loaded position and then change the position to fixed when scrolling beyond that position.
NOTE: this only works if the links are visible on page load!!
在 JavaScript 中你可以这样做：
In javascript you can do:
下面是一个使用 jquery-visible 插件的示例：http://jsfiddle.net/711p4em4/。
HTML:
CSS:
JS (包括 jquery-visible 插件):
Here's an example that uses jquery-visible plugin: http://jsfiddle.net/711p4em4/.
HTML:
CSS:
JS (include jquery-visible plugin):
我使用了上面的一些工作来创建这项技术。 我对其进行了一些改进，并认为我会分享我的工作。 希望这可以帮助。
jsfiddle 代码
这是一种更加动态的滚动方式。 它确实需要一些工作，我会在某个时候将其变成一个插件，但这是我经过一小时的工作后想到的。
I used some of the work above to create this tech. I improved it a bit and thought I would share my work. Hope this helps.
jsfiddle Code
This is a little bit more dynamic of a way to do the scroll. It does need some work and I will at some point turn this into a pluging but but this is what I came up with after hour of work.
我有一个类似的问题 - 我有一个 div 已经浮动在由 CSS 定义的其他内容上方的“固定”位置。 我想要实现的是，当我向下滚动页面时，div 将开始向下滚动内容，但然后粘在页面顶部（即永远不会消失）。
我的 div 的样式是：
我简单地将这个 div 放在页面上的某个位置，它出现在内容的顶部。 对其父母的风格没有特殊要求。
使其粘在顶部的 JS 是：
在 Mac 上测试 - Safari、Firefox、Chrome。 希望 IE 也能工作:)
I had a similar problem - I had a div that was already floating in 'fixed' position above other content, defined by CSS. What I wanted to achieve was when I scrolled the page down, the div would start scrolling down with content but then stick to the top of the page (i.e. would never disappear).
The style of my div is:
I simply put this div somewhere on the page and it appears on top of content. There are no special requirements for the style of its parents.
The the JS to make it stick to the top is:
Tested on a Mac - Safari, Firefox, Chrome. Hopefully should work in IE too :)
要将任何内容粘贴到屏幕顶部，
position:sticky;将不起作用。 我在使用侧边栏时遇到了同样的情况，并且我能够使用position:fixed;将其固定。这是我的整个网站：
如果您的屏幕小于 700PX，导航栏将不会粘住。 不要打开对话框，因为它正在开发
这是我网站的代码。 它在 Chrome 中运行良好，但请测试一下。 这是我的解决方案，对其他人来说应该没问题。
To stick anything to the top of the screen,
position: sticky;won't work. I am experiencing the same situation with a sidebar, and I was able to stick it withposition: fixed;.Here is my whole website:
IF YOUR SCREEN IN SMALLER THAN 700PX, THE NAVBAR WILL NOT STICK. DO NOT OPEN DIALOGS, AS THAT IS UNDER DEVELOPMENT
That is the code for my website. It works in Chrome fine, but please test it. This was my solution, it should be fine for others.
这是没有 jquery 的方法（更新：查看其他答案，您现在可以仅使用 CSS 来做到这一点）
And here's how without jquery (UPDATE: see other answers where you can now do this with CSS only)
我遇到了和你一样的问题，最后制作了一个 jQuery 插件来解决它。 它实际上解决了人们在这里列出的所有问题，此外它还添加了一些可选功能。
选项
https://github.com/donnyv/sticky-panel
演示： http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
I had the same problem as you and ended up making a jQuery plugin to take care of it. It actually solves all the problems people have listed here, plus it adds a couple of optional features too.
Options
https://github.com/donnyv/sticky-panel
demo: http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
您可以在不使用 javascript 的情况下使用：
在 Safari 中，您仍然需要使用位置：-webkit-sticky。
You can make it without using javascript by using :
In Safari you still need to use position: -webkit-sticky.
为回答其他问题而提供的信息可能对您有所帮助，埃文：
检查元素在滚动后是否可见
您基本上想要修改元素的样式，仅在验证 document.body.scrollTop 值等于或大于元素顶部后将其设置为固定。
The info provided to answer this other question may be of help to you, Evan:
Check if element is visible after scrolling
You basically want to modify the style of the element to set it to fixed only after having verified that the document.body.scrollTop value is equal to or greater than the top of your element.
您可以简单地使用 css，将元素定位为 固定：
< strong>编辑：您应该拥有绝对位置的元素，一旦滚动偏移到达该元素，就应该将其更改为固定，并且顶部位置应设置为零。
您可以使用 scrollTop 函数检测文档的顶部滚动偏移：
当滚动偏移达到 200 时，该元素将粘到浏览器窗口的顶部，因为它是固定放置的。
You could use simply css, positioning your element as fixed:
Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.
You can detect the top scroll offset of the document with the scrollTop function:
When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.
您已在 Google 代码的问题页面上看到过此示例，并且 (最近）在 Stack Overflow 的编辑页面上。
当您向上滚动时，CMS 的答案不会恢复定位。 这是从 Stack Overflow 上无耻地窃取的代码：
以及一个简单的现场演示。
一个新兴的、无脚本的替代方案是
position: Sticky，Chrome、Firefox 和 Safari 都支持它。 请参阅有关 HTML5Rocks 的文章和演示，以及Mozilla 文档。You've seen this example on Google Code's issue page and (only recently) on Stack Overflow's edit page.
CMS's answer doesn't revert the positioning when you scroll back up. Here's the shamelessly stolen code from Stack Overflow:
And a simple live demo.
A nascent, script-free alternative is
position: sticky, which is supported in Chrome, Firefox, and Safari. See the article on HTML5Rocks and demo, and Mozilla docs.自 2017 年 1 月 Chrome 56 发布以来，大多数常用浏览器都支持 CSS 中的
position: Sticky属性。在 Firefox 和 Chrome 中对我有用。
在 Safari 中，您仍然需要使用
position: -webkit-sticky。Polyfills 可用于 Internet Explorer 和 Edge； https://github.com/wilddeer/stickyfill 似乎是一个不错的选择。
As of January 2017 and the release of Chrome 56, most browsers in common use support the
position: stickyproperty in CSS.does the trick for me in Firefox and Chrome.
In Safari you still need to use
position: -webkit-sticky.Polyfills are available for Internet Explorer and Edge; https://github.com/wilddeer/stickyfill seems to be a good one.
最简单的解决方案（没有js）：
演示
The simplest solution (without js) :
demo
我的解决方案有点冗长，但它可以处理居中布局的左边缘的可变定位。
My solution is a little verbose, but it handles variable positioning from the left edge for centered layouts.
这是 Josh Lee 答案的扩展版本。 如果您希望 div 位于右侧边栏上，并在一定范围内浮动（即，您需要指定顶部和底部锚点位置）。 它还修复了您在移动设备上查看此内容时的错误（您需要检查左侧滚动位置，否则 div 将移出屏幕）。
Here is an extended version to Josh Lee's answer. If you want the div to be on sidebar to the right, and float within a range (i.e., you need to specify top and bottom anchor positions). It also fixes a bug when you view this on mobile devices (you need to check left scroll position otherwise the div will move off screen).
我在寻找同样的东西时遇到了这个。 我知道这是一个老问题，但我想我应该提供一个更新的答案。
Scrollorama 有一个“固定它”功能，这正是我所寻找的。
http://johnpolacek.github.io/scrollorama/
I came across this when searching for the same thing. I know it's an old question but I thought I'd offer a more recent answer.
Scrollorama has a 'pin it' feature which is just what I was looking for.
http://johnpolacek.github.io/scrollorama/
大多数常用的浏览器都支持CSS中的position:sticky属性。
div { 位置：-webkit-sticky; 位置：粘性； 顶部：0； }
most browsers in common use support the position: sticky property in CSS.
div { position: -webkit-sticky; position: sticky; top: 0; }
正如 Josh Lee 和 Colin 't Hart 说过，你可以选择只使用
position: Sticky; top: 0;应用于您想要滚动的 div...另外，您唯一要做的就是将其复制到页面顶部或将其格式化以适合外部 CSS 表：
只需将
#sticky_div's_name_here替换为您的 div 名称，即如果您的 div 是您将输入#示例 { 位置：粘性； 顶部：0； }。As Josh Lee and Colin 't Hart have said, you could optionally just use
position: sticky; top: 0;applying to the div that you want the scrolling at...Plus, the only thing you will have to do is copy this into the top of your page or format it to fit into an external CSS sheet:
Just replace
#sticky_div's_name_herewith the name of your div, i.e. if your div was<div id="example">you would put#example { position: sticky; top: 0; }.这是另一个选项：
JAVASCRIPT
您的
#myElementToStick应该以position:absoluteCSS 属性开头。Here is another option:
JAVASCRIPT
Your
#myElementToStickshould start withposition:absoluteCSS property.对于那些与其他版本有问题的人来说，还有一个版本可供尝试。 它汇集了 这个重复的问题，并动态生成所需的帮助器 DIV，因此不需要额外的 HTML。
CSS：
JQuery：
要使元素具有粘性，请执行以下操作：
当元素变得粘性时，代码会管理剩余内容的位置，以防止其跳入粘性元素留下的间隙。 当滚动回其上方时，它还会将粘性元素返回到其原始非粘性位置。
Here's one more version to try for those having issues with the others. It pulls together the techniques discussed in this duplicate question, and generates the required helper DIVs dynamically so no extra HTML is required.
CSS:
JQuery:
To make an element sticky, do:
When the element becomes sticky, the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element. It also returns the sticky element to its original non-sticky position when scrolling back above it.
这就是我用 jquery 做到的。 这都是根据堆栈溢出的各种答案拼凑而成的。 该解决方案缓存选择器以获得更快的性能，并且还解决了粘性 div 变得粘性时的“跳跃”问题。
在 jsfiddle 上查看：http://jsfiddle.net/HQS8s/
CSS：
JS：
This is how i did it with jquery. This was all cobbled together from various answers on stack overflow. This solution caches the selectors for faster performance and also solves the "jumping" issue when the sticky div becomes sticky.
Check it out on jsfiddle: http://jsfiddle.net/HQS8s/
CSS:
JS: