Denna handledning kommer att lära dig hur du ändrar det aktiva menyalternativet på sidrullning utan att använda några speciella js-filer eller plugin-program.

I den här demon kommer vi att använda enkla jQuery-funktioner för att uppnå vårt mål.

Förväntad utgång:

På sidrullningshändelse kommer det valda (aktiva) menyalternativet att ändras i enlighet med det aktuella avsnittet som visas. Det kommer också att hända om användaren klickar på någon av menyalternativslänkarna. Denna typ av implementering är bra för ensidiga webbplatser som har en fast menyrad. Låt oss börja.

Live-demo

Första steget: Skapa uppmärkningen

Markeringen är väldigt enkel och lätt. Vi kommer att skapa en enkel navigeringsrad med få menyalternativ som vi har på www.instantshift.com. Den har få saker som hem, webbdesign, CSS, verktyg, handledning etc. Sidan kommer att ha olika textinnehållsblock. Så här ser Markup ut.

Vår HTML-kodning är klar nu är det dags att lägga till lite CSS-stil.

Steg två: Lägga till CSS-klasser.

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

Steg tre: Kontrollera lekplatsen ”jQuery”.

Först och främst ser vi till att när du klickar på menylänkarna ska motsvarande div scrollas upp. Som du kan se i koden nedan tar vi bort den ”aktiva” klassen för det aktuella valda menyalternativet när vi klickar på menyobjektlänken och lägger till den aktiva klassen till den klickade objektlänken.

Då får vi ID för det klickade elementet. this.hash kommer att returnera ”#foo” som är ID-väljare. Därför är $(this.hash) detsamma som $(”#foo”) och det kommer att välja elementet med 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);
        });
    });

På rullningshändelsen kontrollerar vi elementens position mot rullningsmängden samt summan av deras höjd och position. På grundval av detta lägger vi till och tar bort den aktiva klassen för menyalternativen.

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

och sist på sidrullningshändelsen kontrollerar vi om sidofältet kommer att vara klibbigt eller inte.

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

Här är komplett manus.

Det är det, det är lätt eller hur? Njut av! Glöm inte att kolla in demon.

Live Demo och källkod

Här kan du se denna actionmeny i live action. Du kan också ladda ner källfilerna så att du kan redigera och direkt använda dem i vad du vill.

Live Demo  Ladda ner källkod