suchen

Heim  >  Artikel  >  Web-Frontend  >  Sticky-Scrolling-Navigationsleisteneffekt, implementiert von jQuery

Sticky-Scrolling-Navigationsleisteneffekt, implementiert von jQuery

小云云
小云云Original
2018-01-09 10:26:092469Durchsuche

Beim Sticky-Scrolling bleibt die Navigation während des Scrollvorgangs im Browser hängen, wodurch der Effekt eines bequemen Durchsuchens der Website-Seiten erzielt wird, was auch eine Benutzererfahrung darstellt. In diesem Artikel wird hauptsächlich der von jQuery implementierte Sticky-Scrolling-Navigationsleisteneffekt vorgestellt Das jQuery-Plug-in bietet den Lesern vollständige Beispielquellcodes zum Herunterladen und Nachschlagen. Ich hoffe, es kann allen helfen.

Sehen wir uns an, wie es implementiert wird:

Das Smint-Plug-In von jQuery ist auch ein festes Navigationsmenü-Plug-In. Beim Scrollen der Seite wird das Navigationsmenü oben fixiert. Wenn Sie auf das Menü klicken, scrollt die Seite reibungslos zum entsprechenden Bereich.

Kompatibilität

Da Smint Position: Fixed verwendet, ist es nicht mit IE6 kompatibel. Anwendbare Browser: IE8, 360, Firefox, Chrome, Safari, Opera, Maxthon, Sogou, Window of the World.

Einführung in Dateien

<link href="css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.smint.js"></script>

HTML

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<p class="wrap">
  <p class="subMenu">
    <p class="inner">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="sTop" class="subNavBtn">Home</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s1" class="subNavBtn">Section 1</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s2" class="subNavBtn">Section 2</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s3" class="subNavBtn">Section 3</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s4" class="subNavBtn">Section 4</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s5" class="subNavBtn end">Section 5</a>
    </p>
  </p>
  <p class="section sTop">
    <p class="inner"></p><br class="clear">
  </p>
  <p class="section s1">
    <p class="inner"><h1>Section 1</h1></p>
  </p>
  <p class="section s2">
    <p class="inner"><h1>Section 2</h1></p>
  </p>
  <p class="section s3">
    <p class="inner"><h1>Section 3</h1></p>
  </p>
  <p class="section s4">
    <p class="inner"><h1>Section 4</h1></p>
  </p>
  <p class="section s5">
    <p class="inner"><h1>Section 5</h1></p>
  </p>
</p>
</body>

Hinweis: Der äußere Container des Menüs (z. B. das Untermenü im obigen Beispiel) muss den Stil position:absolute festlegen, und das Tag a jedes Menüs muss eine ID festlegen. Der Wert der ID stimmt mit überein Wert der Klasse im entsprechenden Bereich unten ein.

JavaScript

$(function() {
  $('.subMenu').smint({
    scrollSpeed : 1000
  });
});

Verwandte Empfehlungen:

jQuery-Implementierung der Methode zum Ändern der Farbe des Menüelements in der Kopfzeile der Navigationsleiste, nachdem darauf geklickt wurde

JavaScript zum Implementieren personalisierter Navigationsleisten-Spezialeffekte

JavaScript zum Implementieren des Beispielcodes des exquisiten personalisierten Navigationsleisten-Salto-Wolkeneffekts

Das obige ist der detaillierte Inhalt vonSticky-Scrolling-Navigationsleisteneffekt, implementiert von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript firefox jquery chrome safari html class position
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：jQuery implementiert die Funktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder teilt die Funktion zum Einblenden der Maskenebene durch Klicken darauf.Nächster Artikel：jQuery implementiert die Funktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder teilt die Funktion zum Einblenden der Maskenebene durch Klicken darauf.

In Verbindung stehende Artikel

Mehr sehen