Heim >Web-Frontend >js-Tutorial >So erstellen Sie eine Sticky-Top-Navigation mit HTML, CSS und jQuery

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

WBOYOriginal: 2023-10-24 08:37:52912Durchsuche

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>

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;
}

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

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);
  }
}

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!

jquery css html JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML, CSS und jQuery: Erstellen Sie eine Pulldown-AktualisierungsfunktionNächster Artikel：HTML, CSS und jQuery: Erstellen Sie eine Pulldown-Aktualisierungsfunktion

In Verbindung stehende Artikel

Mehr sehen