☰

「position:sticky;」プロパティはどのように機能しますか? 質問する

tag-icon • tag-icon html css position css-position sticky
「position:sticky;」プロパティはどのように機能しますか? 質問する

ユーザーがページをスクロールすると、ナビゲーション バーがビューポートの上部に固定されるようにしたいのですが、うまく機能せず、その理由もわかりません。ご協力いただける場合は、HTML と CSS のコードを次に示します。

.container {
  min-height: 300vh;
}
.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}
<main class="container">
  <nav style="position: sticky; position: -webkit-sticky;">
    <ul align="left">
      <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
      <li><a href="#/about" class="nav-selections">About</a></li>
      <li><a href="#/products" class="nav-selections">Products</a></li>
      <li><a href="#" class="nav-selections">Home</a></li>
    </ul>
  </nav>
</main>

ベストアンサー1

祖先要素にオーバーフロー セット (例overflow:hidden) があるかどうかを確認し、切り替えてみます。予想よりも上位の DOM ツリーを検査する必要がある可能性があります =)。

これはposition:sticky子孫要素に影響する可能性があります。

おすすめ記事