jQuery implementiert seitlich schwebendes Navigationsmenü effect_jquery

WBOY

Freigeben： 2016-05-16 16:24:19

Original

1777 Leute haben es durchsucht

Eine einseitige Webseite hat viel Inhalt und die Seitenlänge ist groß. Sie muss bequem und schnell an verschiedenen Stellen auf der Seite positioniert werden, daher sind schwebende Menüs nach und nach populär geworden, wie unten für Herrenbekleidung gezeigt , Damenbekleidung, Schönheit usw.

Diese Menüfunktion ist in zwei Teile unterteilt:

1. Klicken Sie auf den Menüpunkt und die Webseite scrollt zur entsprechenden Position. Dies kann einfach über Ankerpunkte erreicht werden

2. Beim Scrollen der Seite muss sich der ausgewählte Status des Menüelements entsprechend ändern. Dies erfordert die Überwachung des Scroll-Ereignisses der Webseite und die Umsetzung durch eine kleine Berechnung

Berechnen Sie das Größenverhältnis zwischen scrollTop und offsetTop jedes Div, bestimmen Sie, wo die aktuelle Webseite angezeigt wird, und fügen Sie dann basierend auf den berechneten Ergebnissen Stile zu den entsprechenden Menüelementen hinzu. Beispielsweise ist offset().top des zweiten Div = 300, offset().top des dritten Div = 600 und scrollTop zu diesem Zeitpunkt = 400, was darauf hinweist, dass der größte Teil der angezeigten Position die Position des ist zweite Div und 700 ist die dritte Div. Hier ist ein einfaches Beispiel:

Code kopieren Der Code lautet wie folgt:

Online-Shopping

Code kopieren

Der Code lautet wie folgt:

　　　　 * {margin: 0;padding: 0;}

        body {font-size: 12px;line-height: 1.7;}

        li {list-style: none;}

        #content {width: 800px;margin: 0 auto;padding: 20px;}

        #content h1 {color: #0088bb;}

        #content .item {padding: 20px;margin-bottom: 20px;border: 1px dotted #0088bb;}

        #content .item h2 {font-size: 16px;font-weight: Bold;border-bottom: 2px solid #0088bb;margin-bottom: 10px;}

        #content .item li {display: inline;margin-right: 10px;}

        #content .item li a img {width: 230px;height: 230px;border: none;}

        #menu{position:fixed;left:50%;margin-left:400px;top:100px;}

        #menu ul li a {

            Anzeige: blockieren;

            Rand: 5px 0;

            Schriftgröße: 14px;

            Schriftstärke: fett;

            Farbe: #333;

            Breite: 80px;

            Höhe: 50px;

            Zeilenhöhe: 50px;

            Textdekoration: keine;

            text-align: center;

        }

        #menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;}

复制代码代码如下:

　　$(function(){

               $(window).scroll(function(){

              var scrollTop = $(document).scrollTop();

              var contentItems = $("#content").find(".item");

            var currentItem = "";

contentItems.each(function(){

                    var contentItem = $(this);

                  var offsetTop = contentItem.offset().top;

if(scrollTop > offsetTop-200){//Die 200 hier wird entsprechend der spezifischen Situation festgelegt, denn wenn ein Wert nicht subtrahiert wird, ist der ausgewählte Status des Menüs falsch, wenn zum Rand eines Div gescrollt wird, z Beispiel: Wenn die Seite nur zum Ende des ersten Divs scrollt, hat die Seite bereits das zweite Div angezeigt, aber die erste Option im Menü ist immer noch ausgewählt 

CurrentItem = "#" contentItem.attr("id");

               });

If(currentItem&¤tItem!=$("#menu").find(".current").attr("href")){

$("#menu").find(".current").removeClass("current");

$("#menu").find("[href=" currentItem "]").addClass("current");

                }

            });

});