Denne opplæringen vil lære deg hvordan du endrer det aktive menyelementet på siderulling uten å bruke noen spesielle js-filer eller plug-in.

I denne demoen bruker vi enkle jQuery-funksjoner for å nå målet vårt.

Forventet utgang:

På siderullingshendelse vil det valgte (aktive) menyelementet bli endret i henhold til den gjeldende delen som vises. Det vil også skje hvis brukeren klikker på en av menyelementene. Denne typen implementering er bra for enkeltsidenettsteder som har fast menylinje. La oss komme i gang.

Live Demo

Første trinn: Lage markeringen

Markeringen er veldig enkel og lett. Vi skal lage en enkel navigasjonslinje med få menyelementer som vi har på www.instantshift.com. Den har få elementer som Home, Web Design, CSS, Tools, Tutorials etc. Siden vil ha ulike tekstinnholdsblokker. Her er hvordan Markup ser ut.

Html-oppmerkingen vår er klar, nå er det på tide å legge til litt CSS-stil.

Trinn to: Legge til 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;
}

Trinn tre: Sjekke lekeplassen «jQuery».

Først av alt sørger vi for at ved klikk på menylenkene, skal tilsvarende div rulles opp. Som du kan se i koden nedenfor, fjerner vi den «aktive» klassen til det nåværende valgte menyelementet ved å klikke på menyelementlenken og legger til den aktive klassen til den klikkede elementlenken.

Da får vi IDen til det klikkede elementet. this.hash vil returnere «#foo» som er ID-velger. Derfor er $(this.hash) det samme som $(«#foo») og det vil velge 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å rullehendelsen sjekker vi plasseringen av elementene mot rullemengden samt summen av deres høyde og posisjon. På dette grunnlaget legger vi til og fjerner den aktive klassen for menyelementene.

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

og sist på siderullingshendelsen sjekker vi om sidefeltet vil være klebrig eller ikke.

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

Her er komplett manus.

Det er det, det er enkelt ikke sant? Nyt! Ikke glem å sjekke ut demoen.

Live Demo og kildekode

Her kan du se denne handlingsmenyen i live action. Du kan også laste ned kildefilene slik at du kan redigere og bruke dem direkte i det du måtte ønske.

Live Demo  Last ned kildekode