Aktiivisen valikkokohdan muuttaminen sivun vierittämisessä jQueryn avulla
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.
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ää.
<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 -->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 && refElement.position().top + refElement.height() > 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.
<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>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.