Modifica della voce di menu attiva sullo scorrimento della pagina utilizzando jQuery
Questo tutorial ti insegnerà come modificare la voce di menu attiva sullo scorrimento della pagina senza utilizzare file js o plug-in speciali.
In questa demo utilizzeremo semplici funzioni jQuery per raggiungere il nostro obiettivo.
Uscita prevista:
All’evento di scorrimento della pagina, la voce di menu selezionata (attiva) verrà modificata in base alla sezione attualmente visualizzata. Accadrà anche se l’utente fa clic su uno qualsiasi dei collegamenti delle voci di menu. Questo tipo di implementazione è utile per i siti Web a pagina singola con barra dei menu fissa. Iniziamo.
Primo passo: creare il markup
Il markup è molto semplice e facile. Creeremo una semplice barra di navigazione con poche voci di menu come abbiamo su www.instantshift.com. Ha pochi elementi come Home, Web Design, CSS, Strumenti, Tutorial ecc. La Pagina avrà vari blocchi di contenuto di testo. Ecco come appare il markup.
<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 -->Il nostro markup Html è pronto ora è il momento di aggiungere un po’ di stile CSS.
Fase due: aggiunta di classi CSS.
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;
}Passaggio tre: controllo del playground "jQuery".
Prima di tutto ci assicuriamo che facendo clic sui collegamenti del menu, il corrispondente div venga fatto scorrere verso l’alto. Come puoi vedere nel codice sottostante, al clic del collegamento della voce di menu stiamo rimuovendo la classe "attiva" della voce di menu attualmente selezionata e aggiungendo la classe attiva al collegamento dell’elemento cliccato.
Quindi otteniamo l’ID dell’elemento cliccato. this.hash restituirà "#foo" che è il selettore di ID. Quindi $(this.hash) è uguale a $(“#foo") e selezionerà l’elemento con 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);
});
});Nell’evento di scorrimento stiamo controllando la posizione degli elementi rispetto alla quantità di scorrimento, nonché la somma della loro altezza e posizione. Su questa base stiamo aggiungendo e rimuovendo la classe attiva delle voci di menu.
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");
}
});
}e l’ultimo evento di scorrimento della pagina stiamo controllando se la barra laterale sarà appiccicosa o meno.
$(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');
}
});Ecco lo script completo.
<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>Ecco, è facile vero? Divertiti! Non dimenticare di dare un’occhiata alla demo.
Demo dal vivo e codice sorgente
Qui puoi vedere questo menu di azione in live action. Inoltre, puoi scaricare i file sorgente in modo da poterli modificare e usarli direttamente in qualsiasi cosa tu voglia.