Aktiivse menüüelemendi muutmine lehe kerimisel jQuery abil

See õpetus õpetab teile, kuidas muuta lehe kerimisel aktiivset menüüüksust ilma spetsiaalseid js-faile või pistikprogramme kasutamata.

Selles demos kasutame oma eesmärgi saavutamiseks lihtsaid jQuery funktsioone.

Eeldatav väljund:

Lehe kerimise sündmusel muudetakse valitud (aktiivset) menüüelementi vastavalt hetkel vaadatavale jaotisele. See juhtub ka siis, kui kasutaja klõpsab mõnel menüüelemendi lingil. Seda tüüpi rakendus on hea fikseeritud menüüribaga ühelehelistele veebisaitidele. Alustame.

Reaalajas demo

Esimene samm: märgistuse loomine

Märgistus on väga lihtne ja lihtne. Loome lihtsa navigeerimisriba väheste menüüüksustega, nagu meil on veebisaidil www.instantshift.com. Sellel on vähe üksusi, nagu avaleht, veebikujundus, CSS, tööriistad, õpetused jne. Leheküljel on erinevad tekstisisuplokid. Märgistus näeb välja järgmine.

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

Meie HTML-i märgistus on valmis, nüüd on aeg lisada CSS-stiili.

Teine samm: CSS-i klasside lisamine.

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

Kolmas samm: mänguväljaku "jQuery" kontrollimine.

Kõigepealt veendume, et menüülinkidel klõpsates keritakse üles vastav div. Nagu näete allolevast koodist, eemaldame menüüelemendi lingil klõpsamisel praeguse valitud menüüelemendi "aktiivse" klassi ja lisame aktiivse klassi klõpsatud üksuse lingile.

Seejärel saame klõpsatud elemendi ID. this.hash tagastab "#foo", mis on ID-valija. Seega on $(this.hash) sama mis $(“#foo") ja see valib elemendi ID-ga 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);
        });
    });

Kerimissündmusel kontrollime elementide asukohta keritava hulga suhtes, samuti nende kõrguse ja asukoha summat. Selle põhjal lisame ja eemaldame menüüelementide aktiivse klassi.

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

ja viimane lehe kerimissündmus, mida me kontrollime, kas külgriba on kleepuv või mitte.

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

Siin on täielik skript.

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

See on kõik, see on lihtne, eks? Nautige! Ärge unustage demoga tutvuda.

Reaalajas demo ja lähtekood

Siin näete seda tegevusmenüüd reaalajas. Samuti saate alla laadida lähtefailid, et saaksite neid redigeerida ja otse kasutada, mis iganes teile meeldib.

Reaalajas demo  Laadige alla lähtekood