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

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

今日のインターネット時代では、Web デザインは多くの場合、ユーザー エクスペリエンスとページ機能の整合性に焦点を当てています。 Web ナビゲーション バーはユーザーと Web サイトの間の橋渡しとなるため、ユーザーが必要な情報をすぐに見つけられるように、通常、ナビゲーション バーはページの上部に配置されます。しかし、ユーザーが Web を閲覧する際、ナビゲーション バーを上部に長時間表示し続けると、ページのスペースを占有し、ユーザーが不便に感じる可能性があります。したがって、ユーザー エクスペリエンスを向上させるために、JavaScript を使用して、Web ページの上部にある固定ナビゲーション バーのスクロール効果と非表示効果を実装できます。

この効果を実現する方法は、スクロール イベントをリッスンし、スクロール方向とスクロール距離に基づいてナビゲーション バーの表示と非表示を判断することです。以下はサンプル コードです。

// 获取导航栏元素 const navBar = document.querySelector('.navbar'); // 定义初始滚动位置 let lastScrollTop = 0; // 定义初始导航栏高度 const navBarHeight = navBar.offsetHeight; // 监听滚动事件 window.addEventListener('scroll', function() { // 获取当前滚动位置 const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 判断滚动方向 if (scrollTop > lastScrollTop) { // 向下滚动，隐藏导航栏 navBar.style.transform = `translateY(-${navBarHeight}px)`; } else if (scrollTop < lastScrollTop) { // 向上滚动，显示导航栏 navBar.style.transform = 'translateY(0)'; } // 更新滚动位置 lastScrollTop = scrollTop; });

上記のコードは、まずdocument.querySelector('.navbar')## を通じて.navbarクラス名を持つナビゲーション バー要素を取得します。 ＃。次に、変数lastScrollTopを定義して最後のスクロール位置を保存し、navBar.offsetHeightを使用してナビゲーション バーの高さを取得します。

window.addEventListener('scroll', function() { ... })を通じてスクロール イベントをリッスンします。スクロール イベントのコールバック関数では、まず現在のスクロール位置scrollTopを取得します。次に、現在のスクロール位置と前回のスクロール位置の大小関係を判断することで、スクロールの方向を決定します。

navBar.style.transformのtranslateYプロパティを設定してナビゲーション バーを移動し、ナビゲーション バーの高さ (navBarHeight) を使用することに注意してください。 ) をディスプレイスメントの参照として使用して、ナビゲーション バーが完全に非表示になるようにします。

lastScrollTopを更新する必要があります。

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