位置：粘不工作

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元素，位置粘滯不適用於我。