Tämä opetusohjelma opettaa sinulle, kuinka voit muuttaa aktiivista valikkokohtaa sivun vierittämisessä ilman erityisiä js-tiedostoja tai laajennuksia.

Tässä esittelyssä käytämme yksinkertaisia ​​jQuery-funktioita saavuttaaksemme tavoitteemme.

Odotettu tulos:

Sivun vieritystapahtumassa valittua (aktiivista) valikkokohtaa muutetaan parhaillaan katsottavan osan mukaan. Näin tapahtuu myös, jos käyttäjä napsauttaa jotakin valikkokohdan linkkiä. Tämän tyyppinen toteutus sopii yksisivuisille verkkosivustoille, joissa on kiinteä valikkopalkki. Aloitetaan.

Live-demo

Ensimmäinen vaihe: Merkintöjen luominen

Merkintä on erittäin yksinkertaista ja helppoa. Aiomme luoda yksinkertaisen navigointipalkin muutamalla valikkokohdalla, kuten meillä on osoitteessa www.instantshift.com. Siinä on vähän kohteita, kuten koti, Web Design, CSS, työkalut, opetusohjelmat jne. Sivulla on erilaisia ​​tekstisisältölohkoja. Tältä Markup näyttää.

Html-merkintämme on valmis, nyt on aika lisätä CSS-tyyliä.

Vaihe kaksi: CSS-luokkien lisääminen.

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

Vaihe 3: Tarkista leikkipaikka ”jQuery”.

Ensinnäkin varmistamme, että valikkolinkkejä napsauttamalla vastaava div tulee vierittää ylöspäin. Kuten alla olevasta koodista näet, valikkokohdan linkkiä napsauttamalla poistamme valitun valikkokohdan ”aktiivisen” luokan ja lisäämme aktiivisen luokan napsautettuun linkkiin.

Sitten saamme napsautetun elementin tunnuksen. this.hash palauttaa ”#foo”, joka on ID-valitsin. Tästä syystä $(this.hash) on sama kuin $(”#foo”) ja se valitsee elementin, jonka tunnus on 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);
        });
    });

Vieritystapahtumassa tarkistamme elementtien sijainnin vierityksen määrään sekä niiden korkeuden ja sijainnin summan. Tämän perusteella lisäämme ja poistamme valikon kohtien aktiivisen luokan.

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 viimeinen sivun vieritystapahtuma, jota tarkistamme, onko sivupalkki tahmea vai ei.

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

Tässä on täydellinen käsikirjoitus.

Siinä se, onko se helppoa? Nauttia! Älä unohda katsoa demoa.

Live-demo ja lähdekoodi

Täältä näet tämän toimintovalikon livenä. Voit myös ladata lähdetiedostoja, jotta voit muokata ja käyttää niitä suoraan missä tahansa haluat.

Live-demo  Lataa lähdekoodi