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 を更新する必要があります。

上記のコード例を通じて、Web ページの上部にある固定ナビゲーション バーのスクロール効果と非表示効果を実現し、それによってユーザーのブラウジング エクスペリエンスを向上させることができます。もちろん、実際のニーズに応じて、ナビゲーション バーのスタイルと効果にいくつかの調整と改善を加えて、より良いユーザー インタラクション効果を実現できます。

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