So erstellen Sie eine responsive Scroll-Navigation mit HTML, CSS und jQuery-js-Tutorial-php.cn

So erstellen Sie eine responsive Scroll-Navigation mit HTML, CSS und jQuery

WBOY

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

Original

1288 Leute haben es durchsucht

So erstellen Sie eine responsive Scroll-Navigation mit HTML, CSS und jQuery

So verwenden Sie HTML, CSS und jQuery, um eine responsive Scroll-Navigation zu erstellen

Navigationsmenü spielt eine sehr wichtige Rolle im Webdesign, es kann Benutzern helfen, schnell verschiedene Webseitenteile zu finden und zu ihnen zu navigieren. Bei responsiven Websites müssen wir sicherstellen, dass das Navigationsmenü auf verschiedenen Bildschirmgrößen normal angezeigt und betrieben werden kann. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery eine reaktionsfähige Scroll-Navigation erstellen, und es werden detaillierte Codebeispiele bereitgestellt.

1. HTML-Struktur

Zuerst müssen wir die HTML-Struktur des Navigationsmenüs definieren. Erstellen Sie eine Navigationsmenüliste innerhalb eines Containerelements und legen Sie entsprechende Ankerpunkte für jeden Navigationsmenüpunkt fest, um einen reibungslosen Scrolleffekt innerhalb der Seite zu erzielen. Der Beispiel-HTML-Code lautet wie folgt:

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

Nach dem Login kopieren

Beachten Sie, dass wir eine externe CSS-Stildatei style.css und eine externe JavaScript-Datei script.js eingeführt haben. 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;
  }
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

2. CSS-Stil

Als nächstes müssen wir den Stil des Navigationsmenüs und sein Layout für verschiedene Bildschirmgrößen festlegen. Der Beispielcode im CSS-Stil lautet wie folgt: 🎜rrreee🎜 3. jQuery-Skript 🎜🎜Schließlich verwenden wir jQuery, um Code zu schreiben, um den Effekt einer scrollenden Navigation zu erzielen. Der Beispielcode für ein jQuery-Skript lautet wie folgt: 🎜rrreee🎜Im obigen Code haben wir Folgendes getan: 🎜

Wenn auf einen Link im Navigationsmenü geklickt wird, verhindern Sie das standardmäßige Linksprungverhalten und scrollen Sie reibungslos zum entsprechende Ankerpunktposition.
Während des Scrollens der Seite werden die entsprechenden Navigationsmenüelemente basierend auf der aktuellen Scrollposition hervorgehoben.

🎜Um den aktuellen Navigationsmenüpunkt beim Scrollen hervorgehoben zu halten, definieren wir außerdem eine .active-Klasse im CSS-Stil. Die Klasse .active kann nach Bedarf gestaltet werden. 🎜🎜Das Obige ist ein detailliertes Codebeispiel für die Verwendung von HTML, CSS und jQuery zum Erstellen einer responsiven Scroll-Navigation. Sie können es je nach Bedarf modifizieren und optimieren, um es an unterschiedliche Designs und Layouts anzupassen. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine responsive Scroll-Navigation mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!