Narzędzia internetowePodręcznikiWEB i WordPress

Zmiana aktywnego elementu menu na przewijaniu strony za pomocą jQuery

Od Ostatnia aktualizacja gru 23, 2022

Treść Ukrywać

Krok trzeci: Sprawdzenie placu zabaw „jQuery".

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.

<div id="maindiv">
    <div class="container clear">
        <div id="sidebar">
            <div id="checkdiv"></div>
            <nav class="">
                <ul>
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#webdesign">Web Design</a></li>
                    <li><a href="#css">CSS</a></li>
                    <li><a href="#tools">Tools</a></li>
                    <li><a href="#tutorials">Tutorials</a></li>
                </ul>
            </nav>
        </div> <!-- sidebar div end -->
        <div id="content">
            <section id="home">
                <h1>Home</h1>
                <p><!-- Home Content Goes Here --></p>
            </section>
            <section id="webdesign">
                <h1>Web Design</h1>
                <p><!-- Web Design Content Goes Here --></p>
            </section>
            <section id="css">
                <h1>CSS</h1>
                <p><!-- CSS Content Goes Here --></p>
            </section>
            <section id="tools">
                <h1>Tools</h1>
                <p><!-- Tools Content Goes Here --> </p>
            </section>
            <section id="tutorials">
                <h1>Tutorials</h1>
                <p><!-- Tutorials Content Goes Here --></p>
            </section>
        </div> <!-- contain div end -->
    </div> <!-- container div end -->
</div><!-- maindiv end -->

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 && refElement.position().top + refElement.height() > 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.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function(){
        var window_top = $(window).scrollTop() + 12;
       // the "12" should equal the margin-top value for nav.stickydiv
        var div_top = $('#checkdiv').offset().top;
        if (window_top >= div_top) {
                $('nav').addClass('stickydiv');
            } else {
                $('nav').removeClass('stickydiv');
            }
    }); 
 
  $(document).on("scroll", onScroll);
 
$('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);
        });
    });
});
 
function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#sidebar a').each(function () {
        var currLink = $(this);
       var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#sidebar ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}
</script>

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

AffiAi