Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal dan menyembunyikan bar navigasi tetap di bahagian atas halaman web?

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal dan menyembunyikan bar navigasi tetap di bahagian atas halaman web?

Dalam era Internet hari ini, reka bentuk web sering memfokuskan pada pengalaman pengguna dan integriti fungsi halaman. Bar navigasi web ialah jambatan antara pengguna dan tapak web, jadi bar navigasi biasanya diletakkan di bahagian atas halaman untuk memudahkan pengguna mencari maklumat yang mereka perlukan dengan cepat. Walau bagaimanapun, apabila pengguna menyemak imbas web, mengekalkan bar navigasi dipaparkan di bahagian atas untuk masa yang lama mungkin menempati ruang halaman dan membuatkan pengguna berasa tidak selesa. Oleh itu, untuk meningkatkan pengalaman pengguna, kami boleh menggunakan JavaScript untuk melaksanakan kesan penatalan dan penyembunyian bar navigasi tetap di bahagian atas halaman web.

Cara untuk mencapai kesan ini ialah mendengar acara tatal dan menilai paparan dan penyembunyian bar navigasi berdasarkan arah tatal dan jarak tatal. Berikut ialah kod sampel:

// 获取导航栏元素
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;
});

Kod di atas mula-mula memperoleh elemen bar navigasi dengan nama kelas .navbar melalui document.querySelector('.navbar'). Seterusnya, kami mentakrifkan pembolehubah lastScrollTop untuk menyimpan kedudukan tatal terakhir dan menggunakan navBar.offsetHeight untuk mendapatkan ketinggian bar navigasi. document.querySelector('.navbar') 获取了具有 .navbar 类名的导航栏元素。接下来，我们定义了一个变量 lastScrollTop 用于存储上次滚动的位置，并且使用 navBar.offsetHeight 获取了导航栏的高度。

然后，我们通过 window.addEventListener('scroll', function() { ... }) 来监听滚动事件。在滚动事件的回调函数中，我们首先获取当前的滚动位置 scrollTop。接下来，通过判断当前滚动位置和上次滚动位置的大小关系，我们可以确定滚动的方向。

如果当前滚动位置大于上次滚动位置，则表示用户向下滚动，我们将导航栏向上隐藏。需要注意的是，我们通过设置 navBar.style.transform 的 translateY 属性来实现导航栏的移动，将导航栏的高度（navBarHeight）作为位移参考，以保证导航栏完全隐藏。

相反，如果当前滚动位置小于上次滚动位置，则表示用户向上滚动，我们将导航栏重新显示。

最后，我们需要更新滚动位置 lastScrollTop

Kemudian, kami mendengar acara tatal melalui window.addEventListener('scroll', function() { ... }). Dalam fungsi panggil balik acara tatal, kita mula-mula mendapat kedudukan tatal semasa scrollTop. Seterusnya, dengan menilai hubungan saiz antara kedudukan skrol semasa dan kedudukan skrol terakhir, kita boleh menentukan arah skrol.

Jika kedudukan skrol semasa lebih besar daripada kedudukan skrol terakhir, ini bermakna pengguna skrol ke bawah dan kami menyembunyikan bar navigasi ke atas. Perlu diingatkan bahawa kami menggerakkan bar navigasi dengan menetapkan sifat translateY navBar.style.transform dan menukar ketinggian bar navigasi (navBarHeight kod >) sebagai rujukan anjakan untuk memastikan bar navigasi tersembunyi sepenuhnya. 🎜🎜Sebaliknya, jika kedudukan skrol semasa kurang daripada kedudukan skrol terakhir, ini bermakna pengguna menatal ke atas dan kami akan memaparkan semula bar navigasi. 🎜🎜Akhir sekali, kita perlu mengemas kini kedudukan skrol <code>lastScrollTop untuk perbandingan dalam acara skrol seterusnya. 🎜🎜Dengan contoh kod di atas, kami boleh mencapai kesan penatalan dan penyembunyian bar navigasi tetap di bahagian atas halaman web, dengan itu meningkatkan pengalaman menyemak imbas pengguna. Sudah tentu, mengikut keperluan sebenar, kami boleh membuat beberapa pelarasan dan penambahbaikan pada gaya dan kesan bar navigasi untuk mencapai kesan interaksi pengguna yang lebih baik. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan menatal dan menyembunyikan bar navigasi tetap di bahagian atas halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!