Comment créer une navigation par défilement réactive en utilisant HTML, CSS et jQuery-js tutoriel-php.cn

Comment créer une navigation par défilement réactive en utilisant HTML, CSS et jQuery

WBOY

Libérer： 2023-10-24 10:18:53

original

1288 Les gens l'ont consulté

Comment créer une navigation par défilement réactive en utilisant HTML, CSS et jQuery

Comment utiliser HTML, CSS et jQuery pour créer une navigation par défilement réactive

Le menu de navigation joue un rôle très important dans la conception Web, il peut aider les utilisateurs à localiser et à naviguer rapidement vers différentes parties de page Web. Pour les sites Web réactifs, nous devons nous assurer que le menu de navigation peut s'afficher et fonctionner normalement sur différentes tailles d'écran. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une navigation par défilement réactive et fournira des exemples de code détaillés.

1. Structure HTML

Tout d'abord, nous devons définir la structure HTML du menu de navigation. Créez une liste de menus de navigation dans un élément conteneur et définissez les points d'ancrage correspondants pour chaque élément du menu de navigation afin d'obtenir un effet de défilement fluide à l'intérieur de la page. L'exemple de code HTML est le suivant :

<!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>

Copier après la connexion

Notez que nous avons introduit un fichier de style CSS externe style.css et un fichier JavaScript externe 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;
  }
}

Copier après la connexion

三、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');
      }
    });
  });
});

Copier après la connexion

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

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

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

2. Style CSS

Ensuite, nous devons définir le style du menu de navigation et sa disposition sous différentes tailles d'écran. L'exemple de code de style CSS est le suivant : 🎜rrreee🎜 3. Script jQuery 🎜🎜Enfin, nous utilisons jQuery pour écrire du code afin d'obtenir l'effet de navigation par défilement. L'exemple de code de script jQuery est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous avons effectué les opérations suivantes : 🎜

Lorsque vous cliquez sur un lien dans le menu de navigation, empêchez le comportement de saut de lien par défaut et faites défiler en douceur jusqu'au position du point d'ancrage correspondante.
Au fur et à mesure que la page défile, les éléments du menu de navigation correspondants sont mis en surbrillance en fonction de la position de défilement actuelle.

🎜Afin de garder l'élément de menu de navigation actuel en surbrillance lors du défilement, nous définissons également une classe .active dans le style CSS. La classe .active peut être stylisée selon les besoins. 🎜🎜Ce qui précède est un exemple de code détaillé montrant comment utiliser HTML, CSS et jQuery pour créer une navigation par défilement réactive. Vous pouvez le modifier et l'optimiser en fonction de vos besoins pour l'adapter à différentes conceptions et mises en page. J'espère que cet article vous aidera ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!