BinaryDevelop
  1. ホーム
  2. ハイパーリンク

[解決済み】"position: sticky; "プロパティはどのように機能するのでしょうか？

2022-03-26 22:17:43

質問

ユーザーがページをスクロールすると、ナビゲーションバーがビューポートの上部に張り付くようにしたいのですが、うまくいかず、理由がわかりません。もしあなたが助けてくれるなら、以下は私の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つを含む閾値を指定する必要があります。 top , right , bottom または left を使用すると、スティッキーポジションが期待通りに動作するようになります。 それ以外の場合は、相対位置と区別がつかなくなります。 [ のソースになります。MDN ]

つまり、あなたの例では、最終的に貼り付ける位置を top プロパティを使用します。 

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

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

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します