位置：粘不工作

Question

我有这样的HTML代码：

<div class="header"> 
<div class="desc">Description</div> 
<div class="logo"><img src=""/></div> 
<div class="navbar"></div></div> 

.header具有150像素的高度。 .navbar的高度为20px。当用户滚动时，我想让.navbar粘在顶部。所以我去了CSS并设置了位置：sticky和top：0。但是这不起作用。我最初认为firefox不支持位置：粘性，但事实并非如此，因为我能够看到它的工作演示。我搜索了一下，但没有发现任何帮助。任何人都知道为什么这不起作用？

Answer 1

，如果您将导航栏的标题外，它工作正常。见下文。至于原因，根据MDN：

该元件是根据文档的正常流动定位，然后相对于其流量根和包含基于顶部的值块，右偏移，底部和左侧。

对于包含块的：

含块是祖先到所述元件相对定位

所以，当我不要误会，导航栏是定位的只要它在视口外滚动（这显然意味着，你不能再看到它），在标题的偏移量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>

Answer 2

你的HTML代码，因为它是

<div class="header"> 
<div class="desc">Description</div> 
<div class="logo"><img src=""/></div> 
<div class="navbar"></div></div> 

读写导航栏

.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; 
} 

希望CSS类，这将有助于

Answer 3

不知怎的，你的代码时，.navbar元素不是像头另一容器内才有效。我把它移出来，然后它工作正常。 I created a codepen snippet for that, check it out

<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> 

眼下position:sticky支持相当好，因为你可以看到canIuse。当然，IE目前没有支持，但新的Edge版本将为此提供全面支持！我发现有关此主题的一些有趣的文章：

• 工作演示（浏览器，Firefox）https://codepen.io/simevidas/pen/JbdJRZ
• Caniuse refernce：在MDN http://caniuse.com/#search=sticky
• 粘物品，包括最新的浏览器支持台https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

但在地平线上有好消息。我认为下一次会有更好的浏览器支持。

Answer 4

对于其他任何碰到此问题的人，由于设置了overflow-x: hidden;的body元素，位置粘滞不适用于我。