Bagaimana untuk membuat navigasi skrol responsif menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Bagaimana untuk membuat navigasi skrol responsif menggunakan HTML, CSS dan jQuery

WBOY

Lepaskan： 2023-10-24 10:18:53

asal

1287 orang telah melayarinya

Bagaimana untuk membuat navigasi skrol responsif menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk mencipta navigasi skrol responsif

Menu navigasi memainkan peranan yang sangat penting dalam reka bentuk web, ia boleh membantu pengguna mencari dan menavigasi ke bahagian halaman web yang berbeza dengan cepat. Untuk tapak web responsif, kita perlu memastikan bahawa menu navigasi boleh memaparkan dan beroperasi secara normal pada saiz skrin yang berbeza. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membuat navigasi skrol responsif, dan memberikan contoh kod terperinci.

1. Struktur HTML

Pertama, kita perlu menentukan struktur HTML menu navigasi. Buat senarai menu navigasi dalam elemen bekas dan tetapkan titik utama yang sepadan untuk setiap item menu navigasi untuk mencapai kesan tatal yang lancar di dalam halaman. Contoh kod HTML adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>响应式滚动导航</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <ul class="navigation">
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
    </ul>
  </div>
  <div id="section1">
    <!-- 第一部分内容 -->
  </div>
  <div id="section2">
    <!-- 第二部分内容 -->
  </div>
  <div id="section3">
    <!-- 第三部分内容 -->
  </div>
  <div id="section4">
    <!-- 第四部分内容 -->
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Perhatikan bahawa kami telah memperkenalkan fail gaya CSS luaran style.css dan fail JavaScript luaran script.js. style.css 和一个外部的JavaScript文件 script.js。

二、CSS样式

接下来，我们需要设置导航菜单的样式，以及在不同屏幕尺寸下的布局。示例CSS样式代码如下：

.container {
  width: 100%;
  background-color: #f0f0f0;
  position: fixed;
  top: 0;
  z-index: 999;
}

.navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navigation li {
  float: left;
}

.navigation li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navigation li a:hover {
  background-color: #ddd;
}

#section1,
#section2,
#section3,
#section4 {
  height: 100vh;
}

@media (max-width: 600px) {
  .navigation li {
    float: none;
  }
}

Salin selepas log masuk

三、jQuery脚本

最后，我们使用jQuery编写代码来实现滚动导航的效果。示例jQuery脚本代码如下：

$(document).ready(function() {
  $('.navigation a').on('click', function(event) {
    event.preventDefault();
    
    // 获取目标锚点元素的位置
    var target = $(this.hash);
    var targetPosition = target.offset().top;
    
    // 平滑滚动到目标位置
    $('html, body').animate({
      scrollTop: targetPosition
    }, 800);
  });

  $(window).scroll(function() {
    // 获取当前滚动位置
    var scrollPosition = $(window).scrollTop();
    
    // 高亮显示当前所在的导航菜单项
    $('.navigation a').each(function() {
      var currentLink = $(this);
      var targetSection = $(currentLink.attr('href'));
      var targetSectionTop = targetSection.offset().top;
      var targetSectionBottom = targetSectionTop + targetSection.outerHeight();
      
      if (scrollPosition >= targetSectionTop && scrollPosition < targetSectionBottom) {
        currentLink.addClass('active');
      } else {
        currentLink.removeClass('active');
      }
    });
  });
});

Salin selepas log masuk

以上代码中，我们做了以下操作：

当导航菜单的某个链接被点击时，阻止默认的链接跳转行为，并平滑滚动到对应的锚点位置。
随着页面的滚动，根据当前滚动位置高亮显示对应的导航菜单项。

为了使当前所在的导航菜单项在滚动过程中保持高亮状态，我们还在CSS样式中定义了一个 .active 类。可以根据需要设置 .active

2. Gaya CSS

Seterusnya, kita perlu menetapkan gaya menu navigasi dan reka letaknya di bawah saiz skrin yang berbeza. Contoh kod gaya CSS adalah seperti berikut: 🎜rrreee🎜 3. Skrip jQuery 🎜🎜Akhir sekali, kami menggunakan jQuery untuk menulis kod untuk mencapai kesan navigasi menatal. Contoh kod skrip jQuery adalah seperti berikut: 🎜rrreee🎜Dalam kod di atas, kami melakukan perkara berikut: 🎜

Apabila pautan dalam menu navigasi diklik, halang gelagat lompat pautan lalai dan tatal dengan lancar ke kedudukan mata sauh yang sepadan.
Semasa halaman menatal, item menu navigasi yang sepadan diserlahkan berdasarkan kedudukan skrol semasa.

🎜Untuk memastikan item menu navigasi semasa diserlahkan semasa menatal, kami juga mentakrifkan kelas .active dalam gaya CSS. Kelas .active boleh digayakan mengikut keperluan. 🎜🎜Di atas ialah contoh kod terperinci tentang cara menggunakan HTML, CSS dan jQuery untuk mencipta navigasi skrol responsif. Anda boleh mengubah suai dan mengoptimumkannya mengikut keperluan anda agar sesuai dengan reka bentuk dan reka letak yang berbeza. Semoga artikel ini dapat membantu anda! 🎜

Atas ialah kandungan terperinci Bagaimana untuk membuat navigasi skrol responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!