Sticky-Scrolling-Navigationsleisteneffekt, implementiert von jQuery-js-Tutorial-php.cn

Sticky-Scrolling-Navigationsleisteneffekt, implementiert von jQuery

小云云

Freigeben： 2018-01-09 10:26:09

Original

2474 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!