JavaScript を使用して、Web ページの上部にある固定ナビゲーション バーの縮小効果を実現するにはどうすればよいですか?

JavaScript を使用して、Web ページの上部にある固定ナビゲーション バーの縮小効果を実現するにはどうすればよいですか?

現代の Web デザインでは、固定ナビゲーション バーが一般的なデザイン要素になっています。ユーザーがページをスクロールするとき、固定ナビゲーション バーがページの上部に残るため、ユーザーは Web ページのさまざまな部分を簡単に参照できます。ユーザーエクスペリエンスを向上させるために、ページスペースを節約するためにページを下にスクロールすると固定ナビゲーションバーを縮小したい場合があります。この記事では、JavaScript を使用してこの効果を実現する方法について説明します。

まず、HTML ファイルに固定ナビゲーション バーのコンテナを追加します。これを実現するには、nav 要素を使用します。

<nav id="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

次に、CSS スタイルを追加します。ナビゲーション バーを固定します。ページの上部で、初期の高さとトランジション効果を設定します:

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  transition: height 0.3s ease-in-out;
  height: 60px; /* 初始高度 */
  z-index: 9999;
}

#navbar.shrink {
  height: 40px; /* 收缩后的高度 */
}

JavaScript でナビゲーション バーの縮小効果を実装するのは、主にナビゲーション バーのスタイルを制御することです。ページスクロールイベントをリッスンすることによって。

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var scrollPosition = window.pageYOffset;

  if (scrollPosition > 100) { // 根据具体需求调整滚动位置的阀值
    navbar.classList.add('shrink');
  } else {
    navbar.classList.remove('shrink');
  }
});

上記のコードでは、window.addEventListener を使用して scroll イベントをリッスンし、ページがスクロールするときにコールバック関数をトリガーします。コールバック関数では、最初にナビゲーション バーの要素を取得し、window.pageYOffset を使用してスクロールの垂直オフセットを取得します。特定のニーズに応じて、ナビゲーション バーの縮小を判断するためのスクロール位置のしきい値を調整できます。

ページ スクロールの垂直オフセットがしきい値を超えると、shrink クラス名をナビゲーション バー要素に追加して、CSS で定義された縮小スタイルをトリガーします。スクロールがしきい値未満に戻ると、shrink クラス名が削除され、ナビゲーション バーは元のスタイルに戻ります。

最後に、記述した JavaScript コードをページに導入します。

<script src="script.js"></script>

上記は、JavaScript を使用してページ上部の固定ナビゲーション バーの縮小効果を実現するための具体的な手順とコード例です。ウェブページ。スクロール イベントをリッスンすることで、ページのスクロール位置に応じてナビゲーション バーのスタイルを動的に変更し、縮小効果を実現できます。これにより、ユーザーは Web を閲覧する際のエクスペリエンスが向上し、ページ スペースも節約できます。

以上がJavaScript を使用して、Web ページの上部にある固定ナビゲーション バーの縮小効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。