Endre aktivt menyelement på siderull ved hjelp av jQuery
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.
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.
<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-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 && refElement.position().top + refElement.height() > 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.
<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>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.