Bagaimana untuk menggunakan JavaScript untuk menunjukkan dan menyembunyikan bar navigasi tetap di bahagian bawah halaman web?

Bagaimana untuk menggunakan JavaScript untuk menunjukkan dan menyembunyikan bar navigasi tetap di bahagian bawah halaman web?

Dalam reka bentuk web, bar navigasi tetap ialah elemen reka bentuk biasa, yang boleh menyediakan pengguna dengan fungsi navigasi untuk mengakses tapak web dengan pantas. Apabila pengguna menatal halaman, bar navigasi boleh dibetulkan di bahagian bawah halaman untuk menyediakan perkhidmatan navigasi berterusan. Artikel ini menerangkan cara untuk mencapai kesan ini menggunakan JavaScript dan menyediakan contoh kod khusus.

Untuk mencapai kesan sembunyi-sembunyi bar navigasi tetap di bahagian bawah halaman web, ia boleh dibahagikan kepada langkah berikut:

Langkah 1: Struktur HTML
Mula-mula, buat elemen kontena yang mengandungi bar navigasi dalam fail HTML, seperti menggunakan teg div, dan Tetapkan id supaya ia boleh dimanipulasi menggunakan JavaScript.

<div id="navbar" class="navbar">
  <!-- 导航栏的内容 -->
</div>

Langkah 2: Gaya CSS
Tetapkan gaya CSS untuk bar navigasi, seperti menetapkan kedudukan tetap, penjajaran bawah dan sifat lain. Ini memastikan bar navigasi sentiasa berada di bahagian bawah halaman.

.navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* 其它样式属性 */
}

Langkah 3: Kod JavaScript
Untuk melaksanakan paparan dan kesan sembunyikan bar navigasi, anda perlu memantau acara tatal halaman dan menentukan sama ada bar navigasi dipaparkan berdasarkan kedudukan tatal halaman.

// 获取导航栏元素
var navbar = document.getElementById("navbar");

// 监听页面滚动事件
window.addEventListener("scroll", function() {
  // 获取页面滚动的高度
  var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  
  // 设置导航栏的显示或隐藏
  if (scrollHeight > 200) {
    navbar.style.display = "none";
  } else {
    navbar.style.display = "block";
  }
});

Dalam kod di atas, kami mula-mula mendapatkan elemen bar navigasi melalui kaedah document.getElementById dan kemudian gunakan kaedah window.addEventListener untuk mendengar acara tatal halaman . Dalam fungsi pengendali acara, kami mendapat ketinggian tatal halaman, dan kemudian menentukan sama ada untuk memaparkan bar navigasi berdasarkan ketinggian dan mencapai kesan paparan atau sembunyikan dengan mengubah suai atribut style.display daripada elemen bar navigasi. document.getElementById 方法获取导航栏元素，然后使用 window.addEventListener 方法监听页面滚动事件。在事件处理函数中，我们获取页面滚动的高度，然后根据高度判断是否显示导航栏，通过修改导航栏元素的 style.display 属性来实现显示或隐藏的效果。

需要注意的是，上述代码中的 scrollHeight > 200

Langkah 4: Lengkapkan kesan

Ringkasan

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