Bagaimana untuk menggunakan JavaScript untuk mencapai kesan kemuncak menatal menu navigasi ke kedudukan yang ditentukan?

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan sorotan menatal menu navigasi ke kedudukan yang ditentukan?

Menu navigasi ialah salah satu komponen biasa dalam reka bentuk web Untuk meningkatkan pengalaman pengguna, kami boleh menggunakan JavaScript untuk mencapai kesan penyerlahan apabila menu navigasi menatal ke kedudukan yang ditentukan. Dengan cara ini, semasa pengguna menatal halaman, menu navigasi akan dikemas kini dalam masa nyata untuk menunjukkan lokasi semasa.

Kunci untuk mencapai kesan ini ialah memantau acara tatal halaman dan menentukan hubungan antara kedudukan tatal semasa dan kedudukan yang ditentukan. Di bawah, kami akan menggambarkan cara melaksanakan ini melalui kod contoh tertentu.

Pertama, kita perlu menentukan menu navigasi dalam HTML dan menambah nama kelas (seperti "item-nav") dan atribut tersuai (seperti "sasaran data") pada setiap item navigasi untuk menentukan item navigasi lokasi sasaran yang sepadan.

<nav>
  <ul>
    <li class="nav-item" data-target="section1">导航项1</li>
    <li class="nav-item" data-target="section2">导航项2</li>
    <li class="nav-item" data-target="section3">导航项3</li>
  </ul>
</nav>

<section id="section1">内容1</section>
<section id="section2">内容2</section>
<section id="section3">内容3</section>

Seterusnya, kami menulis kod JavaScript untuk merealisasikan kesan penyerlahan menatal menu navigasi ke kedudukan yang ditentukan.

// 获取导航菜单中的所有导航项
const navItems = document.querySelectorAll('.nav-item');

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  // 获取页面滚动的垂直位置
  const scrollPosition = window.scrollY;

  // 遍历导航项
  navItems.forEach(navItem => {
    // 获取该导航项对应的目标位置
    const target = navItem.getAttribute('data-target');
    
    // 获取目标位置的垂直位置
    const targetPosition = document.getElementById(target).offsetTop;

    // 判断当前滚动位置是否在目标位置的上方
    if (scrollPosition < targetPosition) {
      // 移除高亮样式
      navItem.classList.remove('active');
    } else {
      // 添加高亮样式
      navItem.classList.add('active');
    }
  });
});

Dalam kod di atas, kami mula-mula menggunakan kaedah querySelectorAll untuk mendapatkan semua item navigasi dan mendengar halaman menatal melalui acara scroll. Dalam fungsi panggil balik acara tatal, kami memperoleh kedudukan menegak tatal halaman semasa dan melintasi setiap item navigasi. querySelectorAll 方法获取所有的导航项，并通过 scroll 事件监听页面滚动。在滚动事件的回调函数中，我们获取当前页面滚动的垂直位置，并遍历每一个导航项。

对于每一个导航项，我们通过 getAttribute 方法获取其对应的目标位置，并通过 offsetTop

Untuk setiap item navigasi, kami memperoleh kedudukan sasarannya yang sepadan melalui kaedah getAttribute dan mendapatkan kedudukan menegak kedudukan sasaran melalui atribut offsetTop. Kemudian, kami menentukan sama ada kedudukan skrol semasa berada di atas kedudukan sasaran. Jika ya, alih keluar gaya serlahan jika tidak, tambahkan gaya serlahan.

Akhir sekali, kami boleh menentukan gaya penyerlahan item navigasi melalui CSS untuk menggambarkan lokasi semasa.

.nav-item.active {
  color: red;
  font-weight: bold;
}

Dengan contoh kod di atas, kami boleh melaksanakan menu navigasi mudah menatal ke kesan penyerlahan kedudukan yang ditentukan. Dengan cara ini, apabila pengguna menatal dalam halaman, menu navigasi akan dikemas kini dalam masa nyata untuk membimbing pengguna dengan lebih baik untuk menavigasi dan menyemak imbas dalam halaman. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan kemuncak menatal menu navigasi ke kedudukan yang ditentukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!