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.navbarmelaluidocument.querySelector('.navbar'). Seterusnya, kami mentakrifkan pembolehubahlastScrollTopuntuk menyimpan kedudukan tatal terakhir dan menggunakannavBar.offsetHeightuntuk mendapatkan ketinggian bar navigasi.document.querySelector('.navbar')获取了具有.navbar类名的导航栏元素。接下来，我们定义了一个变量lastScrollTop用于存储上次滚动的位置，并且使用navBar.offsetHeight获取了导航栏的高度。

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

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

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

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