web-dev-qa-db-ja.com

位置：スティッキーが機能しない

私はこのHTMLコードを持っています：

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

.headerの高さは150pxです。 .navbarの高さは20ピクセルです。ユーザーがスクロールすると、.navbarが上部に固定されます。それでCSSに行き、position：stickyとtop：0を設定しました。しかし、これはうまくいきませんでした。最初は、Firefoxはposition：stickyをサポートしていないと思っていましたが、実際のデモを見ることができたので、そうではありません。私はそれについてグーグルで調べたが、何も役に立たなかった。なぜこれが機能しないのか誰でも知っていますか？

csspositionnavbarsticky
14
Wolfuryo

ヘッダーの外側にnavbarを移動すると正常に機能します。下記参照。理由により、 [〜＃〜] mdn [〜＃〜] ：

要素は、ドキュメントの通常のフローに従って配置され、その後、フロールートに対してoffset relativeおよびを含むblocktop、right、bottom、およびleftの値に基づきます。

を含むブロックの場合：

包含ブロックは、要素が相対的に配置される先祖です

そのため、誤解しない限り、navbarはビューポートの外側にスクロールされるとすぐにヘッダー内のオフセット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>
16
SVSchmidt

これに遭遇した他の人にとっては、body要素がoverflow-x: hidden;セット。

24
nickspiel

どういうわけか、コードは.navbar要素は、ヘッダーのような別のコンテナ内にありません。私はそれを外に出し、それからそれはうまく働きます。 そのためのコードペンスニペットを作成しました。チェックしてください

<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バージョンはこれを完全にサポートします！このトピックに関する興味深い記事がいくつか見つかりました。

しかし、水平線には良いニュースがあります。次回はより良いブラウザのサポートが続くと思います。

1
Gerrit Halfmann

そのままのHTMLコード

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

ナビゲーションバーの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;
}

これが役立つことを願って

0
M Thomas