位置：スティッキー

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は支持的な立場ではないと考えました。しかし、それは実際のデモを見ることができたためではありません。私はそれについてgoogledしかし何も役に立たなかった。なぜこれが機能していないのか誰もが知っていますか？

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コードには、ナビゲーションバー

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

ホープ

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

と書き込み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

bodyの要素がoverflow-x: hidden;に設定されているため、これに該当する他の人には、ポジティブスティッキーが機能しませんでした。