In diesem Tutorial erfahren Sie, wie Sie das aktive Menüelement beim Scrollen der Seite ändern, ohne spezielle JS-Dateien oder Plug-Ins zu verwenden.

In dieser Demo verwenden wir einfache jQuery-Funktionen, um unser Ziel zu erreichen.

Erwartete Ausgabe:

Beim Seitenscroll-Ereignis wird der ausgewählte (aktive) Menüpunkt entsprechend dem aktuell angezeigten Abschnitt geändert. Dies geschieht auch, wenn der Benutzer auf einen der Menüelement-Links klickt. Diese Art der Implementierung eignet sich gut für Single-Page-Websites mit fester Menüleiste. Lass uns anfangen.

Live-Demo

Erster Schritt: Erstellen des Markups

Das Markup ist sehr einfach und leicht. Wir werden eine einfache Navigationsleiste mit wenigen Menüpunkten erstellen, wie wir sie auf www.instantshift.com haben. Es enthält einige Elemente wie Startseite, Webdesign, CSS, Tools, Tutorials usw. Die Seite enthält verschiedene Textinhaltsblöcke. So sieht das Markup aus.

Unser HTML-Markup ist fertig, jetzt ist es an der Zeit, etwas CSS-Stil hinzuzufügen.

Schritt Zwei: Hinzufügen von CSS-Klassen.

body{
      background-color:#520000;font-size:17px;
}
 
#maindiv{
      background:#F4F3E8 url(images/page_bg.webp);
}
 
#title h1 {
     text-align: right;font-weight: bold;font-size: 25px;margin: 0;color:#fff;
}
 
.container {
     width: 1000px;margin: 0 auto;padding: 38px 0;
}
 
#wrapper{
     margin:0px auto;
}
 
#sidebar {
    width:250px;float:left;
}
 
#content {
   width:720px;float:right;padding-left:12px;
}
 
#title {
   width: 900px;height: 60px;float: right;
}
 
.clear:after {
   visibility: hidden;display: block;content: "";clear: both;height: 0;
}
 
nav {
  width:213px;background-color:#030000;border: 2px solid #4F4D4D;padding:0 12px;
}
 
nav.stickydiv {
   position: fixed;top: 0;z-index: 10000;margin-top:12px;
}
 
nav ul {
list-style-type:none;margin:0;padding:0;
}
 
nav li {
padding:5px 10px;
}
 
nav li a {
color:#fff;font-weight:700;line-height: 25px;
}
 
a{
text-decoration:none;
}
 
.active {
color: #F99;text-decoration: none;
}
 
p{
font-family:Verdana,Arial,Helvetica,sans-serif;
}
 
footer p{
  color:#fff;
}

Schritt drei: Überprüfung des Spielplatzes „jQuery“.

Zunächst stellen wir sicher, dass beim Klicken auf die Menülinks das entsprechende Div nach oben gescrollt werden sollte. Wie Sie im folgenden Code sehen können, entfernen wir beim Klicken auf den Menüelement-Link die „aktive“ Klasse des aktuell ausgewählten Menüelements und fügen die aktive Klasse dem angeklickten Element-Link hinzu.

Dann erhalten wir die ID des angeklickten Elements. this.hash gibt „#foo“ zurück, was der ID-Selektor ist. Daher ist $(this.hash) dasselbe wie $(„#foo“) und es wird das Element mit der ID foo auswählen.

$('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
         
        $('a').each(function() {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
         var target = this.hash,
         menu = target;
        $target = $(target);
               
       $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 600, 'swing', function() {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });

Beim Scroll-Ereignis prüfen wir die Position der Elemente anhand des Scrollbetrags sowie der Summe ihrer Höhe und Position. Auf dieser Grundlage fügen wir die aktive Klasse der Menüpunkte hinzu und entfernen sie.

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#sidebar a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top  scrollPos) {
            $('#sidebar ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

und zuletzt beim Scrollen der Seite prüfen wir, ob die Seitenleiste klebrig ist oder nicht.

$(window).scroll(function(){
        // the "12" should equal the margin-top value for nav.stickydiv
        var window_top = $(window).scrollTop() + 12;
        var div_top = $('#checkdiv').offset().top;
            if (window_top >= div_top) {
                $('nav').addClass('stickydiv');
            } else {
                $('nav').removeClass('stickydiv');
            }
 });

Hier ist das vollständige Skript.

Das ist es, es ist einfach richtig? Genießen! Vergessen Sie nicht, sich die Demo anzusehen.

Live-Demo und Quellcode

Hier sehen Sie dieses Aktionsmenü in Live-Aktion. Außerdem können Sie die Quelldateien herunterladen, damit Sie sie bearbeiten und direkt verwenden können, was immer Sie möchten.

Live-Demo  Quellcode herunterladen