Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pengecutan bar navigasi tetap di bahagian atas halaman web?

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pengecutan bar navigasi tetap di bahagian atas halaman web?

Dalam reka bentuk web moden, bar navigasi tetap telah menjadi elemen reka bentuk biasa. Apabila pengguna menatal halaman, bar navigasi tetap boleh kekal di bahagian atas halaman, membolehkan pengguna menyemak imbas bahagian halaman web yang berbeza dengan mudah. Untuk meningkatkan pengalaman pengguna, kadangkala kami mahu bar navigasi tetap mengecil apabila halaman ditatal ke bawah untuk menjimatkan ruang halaman. Artikel ini menerangkan cara untuk mencapai kesan ini menggunakan JavaScript.

Pertama, tambahkan bekas bar navigasi tetap dalam fail HTML, yang boleh dicapai menggunakan elemen nav: nav 元素来实现：

<nav id="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

接下来，添加 CSS 样式使导航栏固定在页面的顶部，并设置初始高度和过渡效果：

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  transition: height 0.3s ease-in-out;
  height: 60px; /* 初始高度 */
  z-index: 9999;
}

#navbar.shrink {
  height: 40px; /* 收缩后的高度 */
}

在 JavaScript 中实现导航栏的收缩效果主要是通过监听页面滚动事件来控制导航栏的样式。

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var scrollPosition = window.pageYOffset;

  if (scrollPosition > 100) { // 根据具体需求调整滚动位置的阀值
    navbar.classList.add('shrink');
  } else {
    navbar.classList.remove('shrink');
  }
});

在上述代码中，我们使用 window.addEventListener 监听 scroll 事件，当页面滚动时触发回调函数。在回调函数中，我们首先获取导航栏的元素，并使用 window.pageYOffset 获取滚动的垂直偏移量。根据具体需求，可以调整判断导航栏收缩的滚动位置阀值。

当页面滚动的垂直偏移量超过阀值时，我们添加 shrink 类名到导航栏元素上，触发 CSS 中定义的收缩样式。当滚动回到阀值以下时，我们移除 shrink

<script src="script.js"></script>

Seterusnya, tambah CSS Gaya membetulkan bar navigasi di bahagian atas halaman dan menetapkan ketinggian awal dan kesan peralihan:

rrreee

Melaksanakan kesan pengecutan bar navigasi dalam JavaScript adalah terutamanya untuk mengawal gaya navigasi bar dengan mendengar acara tatal halaman.

rrreee

Dalam kod di atas, kami menggunakan window.addEventListener untuk mendengar acara scroll dan mencetuskan fungsi panggil balik apabila halaman menatal. Dalam fungsi panggil balik, kita mula-mula mendapatkan elemen bar navigasi dan menggunakan window.pageYOffset untuk mendapatkan offset menegak skrol. Mengikut keperluan khusus, ambang kedudukan tatal untuk menilai pengecutan bar navigasi boleh dilaraskan. #🎜🎜##🎜🎜#Apabila offset menegak skrol halaman melebihi ambang, kami menambah nama kelas mengecut pada elemen bar navigasi untuk mencetuskan gaya pengecutan yang ditakrifkan dalam CSS. Apabila tatal kembali di bawah ambang, kami mengalih keluar nama kelas mengecut dan bar navigasi kembali kepada gaya asalnya. #🎜🎜##🎜🎜#Akhir sekali, perkenalkan kod JavaScript bertulis ke dalam halaman: #🎜🎜#rrreee#🎜🎜#Di atas ialah langkah dan contoh kod khusus untuk menggunakan JavaScript untuk mencapai kesan pengecutan bar navigasi tetap di bahagian atas halaman web. Dengan mendengar acara tatal, kita boleh menukar gaya bar navigasi mengikut kedudukan tatal halaman secara dinamik untuk mencapai kesan pengecutan. Dengan cara ini, pengguna akan mendapat pengalaman yang lebih baik semasa menyemak imbas web, dan ia juga boleh menjimatkan ruang halaman. #🎜🎜#

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