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

So erstellen Sie eine Sticky-Top-Navigation mit HTML, CSS und jQuery

WBOY

Freigeben： 2023-10-24 08:37:52

Original

920 Leute haben es durchsucht

So erstellen Sie eine Sticky-Top-Navigation mit HTML, CSS und jQuery

Vorwort:
In der Webentwicklung kann eine nützliche Top-Navigationsleiste das Benutzererlebnis verbessern und Benutzern schnellen Zugriff auf andere Seiten der Website ermöglichen. In diesem Artikel erfahren Sie, wie Sie mit HTML, CSS und jQuery eine Sticky-Navigationsleiste oben erstellen, um das Benutzererlebnis Ihrer Website zu verbessern.

HTML-Struktur:
Im ersten Schritt müssen wir eine grundlegende HTML-Struktur erstellen, um unsere obere Navigationsleiste unterzubringen. Fügen Sie Ihrer HTML-Datei den folgenden Code hinzu:

<!DOCTYPE html>
<html>
<head>
  <title>粘性顶部导航栏</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="navbar">
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#services">服务</a>
    <a href="#contact">联系方式</a>
  </div>
  
  <!-- 页面内容... -->
  
</body>
</html>

Nach dem Login kopieren

CSS-Stile:
Im zweiten Schritt müssen wir CSS-Stile verwenden, um das Aussehen und Verhalten der oberen Navigationsleiste zu definieren. Fügen Sie Ihrer CSS-Datei den folgenden Code hinzu:

body {
  margin: 0;
  padding-top: 50px; /* 给顶部导航栏留出空间 */
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 15px;
  display: flex;
  justify-content: space-around;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

.navbar a:hover {
  background-color: #555;
}

Nach dem Login kopieren

jQuery-Skript:
Im dritten Schritt müssen wir jQuery verwenden, um den Sticky-Effekt und den reibungslosen Bildlaufübergang der oberen Navigationsleiste zu erzielen. Fügen Sie den folgenden Code in Ihre Datei „script.js“ ein:

$(document).ready(function() {
  // 检测页面滚动事件
  $(window).scroll(function() {
    // 检测垂直滚动距离
    if ($(this).scrollTop() > 50) {
      // 添加固定样式
      $('.navbar').addClass('sticky');
    } else {
      // 移除固定样式
      $('.navbar').removeClass('sticky');
    }
  });
});

Nach dem Login kopieren

Angehängte CSS-Stile:
Sie müssen die folgenden CSS-Stile in „styles.css“ hinzufügen:

.sticky {
  position: fixed;
  top: 0;
  animation: slideDown 0.5s ease;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

Nach dem Login kopieren

Jetzt haben Sie erfolgreich eine Sticky-Top-Navigationsleiste erstellt. Während der Benutzer auf der Seite nach unten scrollt, bleibt die Navigationsleiste oben auf der Seite fixiert und bleibt während des Scrollvorgangs sichtbar. Wenn Sie zum Seitenanfang zurückkehren, kehrt die Navigationsleiste in ihren ursprünglichen Zustand zurück.

Zusammenfassung:
Dieser Artikel verwendet HTML, CSS und jQuery, um eine Sticky-Navigationsleiste oben zu erstellen, und bietet spezifische Codebeispiele. Eine nützliche obere Navigationsleiste kann Website-Benutzern Komfort und eine gute Benutzererfahrung bieten. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, eine schöne obere Navigationsleiste in der Webentwicklung zu erstellen.

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