Ten samouczek nauczy Cię, jak zmienić aktywny element menu podczas przewijania strony bez użycia specjalnych plików js lub wtyczki.

W tym demo użyjemy prostych funkcji jQuery, aby osiągnąć nasz cel.

Oczekiwany wynik:

W przypadku przewinięcia strony wybrana (aktywna) pozycja menu zostanie zmieniona zgodnie z aktualnie przeglądaną sekcją. Stanie się tak również wtedy, gdy użytkownik kliknie dowolny link do elementu menu. Ten typ implementacji jest dobry dla witryn jednostronicowych ze stałym paskiem menu. Zacznijmy.

Demo na żywo

Pierwszy krok: tworzenie znaczników

Oznaczenie jest bardzo proste i łatwe. Stworzymy prosty pasek nawigacyjny z kilkoma pozycjami menu, tak jak na www.instantshift.com. Ma kilka elementów, takich jak strona główna, projektowanie stron internetowych, CSS, narzędzia, samouczki itp. Strona będzie miała różne bloki treści tekstowej. Oto jak wygląda znacznik.

Nasz znacznik HTML jest gotowy, teraz czas dodać styl CSS.

Krok drugi: dodanie klas CSS.

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

Krok trzeci: Sprawdzenie placu zabaw „jQuery”.

Przede wszystkim upewniamy się, że po kliknięciu linków menu odpowiedni div powinien zostać przewinięty w górę. Jak widać w poniższym kodzie, po kliknięciu łącza elementu menu usuwamy „aktywną” klasę aktualnie wybranego elementu menu i dodajemy aktywną klasę do łącza klikniętego elementu.

Następnie otrzymujemy ID klikniętego elementu. this.hash zwróci „#foo”, który jest selektorem ID. Stąd $(this.hash) jest tym samym co $(„#foo”) i wybierze element o ID foo.

$('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);
        });
    });

Na zdarzeniu scroll sprawdzamy położenie elementów względem ilości przewijania oraz sumy ich wysokości i położenia. Na tej podstawie dodajemy i usuwamy aktywną klasę pozycji menu.

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

i ostatnie na zdarzeniu przewijania strony sprawdzamy, czy pasek boczny będzie się kleił, czy nie.

$(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');
            }
 });

Oto kompletny skrypt.

To wszystko, to proste, prawda? Cieszyć się! Nie zapomnij sprawdzić wersji demonstracyjnej.

Demo na żywo i kod źródłowy

Tutaj możesz zobaczyć to menu akcji w akcji na żywo. Możesz także pobrać pliki źródłowe, aby móc je edytować i bezpośrednio używać w dowolny sposób.

 Pobierz kod źródłowy wersji demonstracyjnej na żywo