Warum gibt es eine solche Nachfrage? Haben Sie einige Websites im Ausland gefunden, die beim Scrollen in der Navigationsleiste an der Spitzenposition schwebt. Wenn Benutzer den Inhalt anzeigen möchten, können sie klicken, um ihn direkt zu erreichen, was eine Menge Ziehenszeit spart. Natürlich ist es einfacher, nach oben zurückzukehren. Aber manchmal wird der Knopf nach oben oft übersehen. Schauen wir uns den Code und die Demonstration an ( Einführung von JQuery 1.9 ).
Um festzustellen, ob die Maus nach oben scrollt oder nach unten scrollt, können Sie die Koordinaten der letzten Schriftrolle des Benutzers mit den Koordinaten des nächsten Mals vergleichen. Wenn das letzte Mal geringer ist als das nächste Mal, dh der Benutzer scrollt nach unten, andernfalls bedeutet dies, dass der Benutzer nach oben scrollt. Der Scroll -Koordinatenwert kann als Scrolltop des Fensters verwendet werden.
Beispiel für HTML -Code
<div id="Jnav"> <ul> <li><a href="http://caibaojian.com/">WEB front-end development</a></li> <li><a href="#">front-end development blog</a></li> <li><a href="#">front-end development</a></li> <li><a href = "#"> Front-End-Entwicklung </a> </li> <li> <a href = "#"> Front-End-Entwicklung </a> </li> </ul> </div>
Beispiele für JavaScript -Code
var $ nav = $ ('#jnav'), navtop = $ nav.Offset (). Top, navh = $ nav.outerHeight (), wintop_1 = 0, Winwidth = $ (Fenster) .Width (), Holder = jQuery ('<div>); $ (Fenster). Holder.css ('Höhe', NAVH); Scrollen Sie nach oben und Anzeige (Wintop_2> Wintop_1 && Winwidth> 980) {$ nav.removeclass ('Fixed-Nav-Appear');Beispiel für CSS -Code
.nav {width: 980px; Rand: 0 Auto;}. Nav Li {Anzeige: Inline-Block; *Anzeige: Inline; *Zoom: 1; Rand: 0 10px;}. nav li a {display: block; Polsterung: 5px 10px;}. Fixed-Nav {Position: behoben; Breite: 100%; Oben: -40px; -Webkit-Übergang: Top .5s; -moz-Übergang: Top .5s; -O-Übergang: Top .5s; Übergang: Top .5s; -Webkit-Box-Shadow: 0 2px 2px RGBA (0,0,0, .1); -moz-box-shadow: 0 2px 2px rgba (0,0,0, .1); Box-Shadow: 0 2px 2px RGBA (0,0,0, .1);}. Feste Navear {Top: 0;}Das obige ist der Beispielcode für die Verwendung von JS zur Implementierung der schwimmenden Navigation, wenn sich die Maus scrolliert. Wenn Sie interessiert sind, wenden Sie sich bitte darauf an.