CSS 位置：粘性不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45530235/
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
position:sticky is not working
提问by Wolfuryo
I have this HTML code:
我有这个 HTML 代码：
<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>
.header has a height of 150px. .navbar has a height of 20px. When the user scrolls, I want .navbar to stick at the top. So I went to the CSS and set position:sticky and top:0. But this didn't work. I initially thought that firefox is not supporting position:sticky, but that's not the case because I was able to see a working demo of it. I googled about it but found nothing helpful. Anyone knows why this is not working?
.header 的高度为 150px。.navbar 的高度为 20px。当用户滚动时，我希望 .navbar 停留在顶部。所以我去 CSS 并设置 position:sticky 和 top:0。但这没有用。我最初认为 Firefox 不支持 position:sticky，但事实并非如此，因为我能够看到它的工作演示。我用谷歌搜索了一下，但没有发现任何帮助。任何人都知道为什么这不起作用？
回答by nickspiel
For anyone else that comes across this, position sticky was not working for me due to the bodyelement having overflow-x: hidden;set.
对于遇到此问题的任何其他人，由于body元素已overflow-x: hidden;设置，位置粘性对我不起作用。
回答by SVSchmidt
It works fine if you move the navbar outside the header. See below. For the reason, according to MDN:
如果您将导航栏移到标题外，它可以正常工作。见下文。出于这个原因，根据MDN：
The element is positioned according to the normal flow of the document, and then offset relativeto its flow root and containing blockbased on the values of top, right, bottom, and left.
元素按照文档的正常流程定位，然后根据顶部、右侧、底部和左侧的值相对于其流根和包含块进行偏移。
For the containing block:
对于包含块：
The containing block is the ancestor to which the element is relatively positioned
包含块是元素相对定位的祖先
So, when I do not misunderstand, the navbar is positioned at offset 0 within the header as soon as it is scrolled outside the viewport (which, clearly, means, you can't see it anymore).
因此，当我没有误解时，导航栏一旦在视口外滚动，就会定位在标题内的偏移量 0 处（这显然意味着您再也看不到它了）。
.navbar {
background: hotpink;
width: 100%;
height: 50px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.header {
height: 150px;
background: grey;
}
body {
height: 800px;
position: relative;
}<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
</div>
<div class="navbar"></div>回答by Gerrit Halfmann
Somehow your code only works when the .navbarelement is not inside another container like the header. I moved it out and then it works fine. I created a codepen snippet for that, check it out
不知何故，您的代码仅在.navbar元素不在另一个容器（如标题）内时才有效。我把它移出来然后它工作正常。我为此创建了一个 codepen 片段，请查看
<header>
<div class="logo">Logo</div>
<div class="description"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis.</div></div>
</header>
<div class="navbar">
<ul>
<li><a href="#">navitem1</a></li>
<li><a href="#">navitem2</a></li>
<li><a href="#">navitem3</a></li>
<li><a href="#">navitem4</a></li>
</ul>
</div>
Right now position:stickyis supported quite good as you can see on canIuse. Of course IE currently has no support but the new Edge version will bring full support for this! I found some interesting articles about this topic:
position:sticky正如您在 canIuse 上看到的那样，现在支持非常好。当然IE目前不支持，但新的Edge版本会全面支持！我发现了一些关于这个主题的有趣文章：
- Working demo (chrome,firefox ) https://codepen.io/simevidas/pen/JbdJRZ
- Caniuse refernce: http://caniuse.com/#search=sticky
- sticky article on MDN including latest browser support table https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
- 工作演示 (chrome,firefox) https://codepen.io/simevidas/pen/JbdJRZ
- Caniuse 参考：http://caniuse.com/#search=sticky
- MDN 上的粘性文章，包括最新的浏览器支持表https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
But there are good news on the horizon. I think better browser support will follow the next time.
但也有好消息即将出现。我认为下一次会有更好的浏览器支持。
回答by M Thomas
Your HTML code as it is
您的 HTML 代码原样
<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>
and write CSS class for navigation bar
并为导航栏编写 CSS 类
.header {
height: 150px;
background-color: #d1d1d1;
}
.navbar {
background: #999;
border-bottom: 1px solid #333;
border-top: 1px solid #333;
color: #FFF;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
Hope this will help
希望这会有所帮助
回答by Mladen Janjic
Adding more content after navinside headerprovides sticky behavior, but only for a moment - if the user scrolls down too much, navwill disappear with header, since it can't jump out below header's bottom border.
在header 中的nav之后添加更多内容会提供粘性行为，但只是片刻 - 如果用户向下滚动太多，nav将与header 一起消失，因为它不能跳出header的底部边框下方。
Thus, the only solution with pure CSS is to put navinside element that is partially visible even after the user scrolls to the bottom of the page (directly inside bodyor inside some sort of container that spans to the bottom of the page or at least to the footer).
因此，纯 CSS 的唯一解决方案是将导航放在部分可见的元素中，即使在用户滚动到页面底部之后（直接在body内部或在跨越页面底部的某种容器内，或至少到页脚）。
If this solution is not possible, the other way is to use JavaScript. Before transitioning to CSS, I used the following code (found similar jQuery solution somewhere long time ago, don't remember where, so the credit goes to the anonymous author; Vanilla JS can be easily obtained from this):
如果此解决方案不可行，另一种方法是使用 JavaScript。在过渡到 CSS 之前，我使用了以下代码（很久以前在某处找到了类似的 jQuery 解决方案，不记得在哪里，所以归功于匿名作者；可以很容易地从中获得 Vanilla JS）：
$(document).ready(function () {
var sticky_navigation_offset_top = $('nav').offset().top;
var sticky_navigation = function () {
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_navigation_offset_top) {
$('nav').css({
'position': 'fixed',
'top': 0,
'left': 0,
'right': 0,
'margin-left': 'auto',
'margin-right': 'auto'
});
} else {
$('nav').css({
'position': 'relative'
});
}
};
sticky_navigation();
$(window).scroll(function () {
sticky_navigation();
});
});
