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.

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) {
            $('#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.

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