Ändern des aktiven Menüpunkts beim Scrollen der Seite mit jQuery
In diesem Tutorial erfahren Sie, wie Sie das aktive Menüelement beim Scrollen der Seite ändern, ohne spezielle JS-Dateien oder Plug-Ins zu verwenden.
In dieser Demo verwenden wir einfache jQuery-Funktionen, um unser Ziel zu erreichen.
Erwartete Ausgabe:
Beim Seitenscroll-Ereignis wird der ausgewählte (aktive) Menüpunkt entsprechend dem aktuell angezeigten Abschnitt geändert. Dies geschieht auch, wenn der Benutzer auf einen der Menüelement-Links klickt. Diese Art der Implementierung eignet sich gut für Single-Page-Websites mit fester Menüleiste. Lass uns anfangen.
Erster Schritt: Erstellen des Markups
Das Markup ist sehr einfach und leicht. Wir werden eine einfache Navigationsleiste mit wenigen Menüpunkten erstellen, wie wir sie auf www.instantshift.com haben. Es enthält einige Elemente wie Startseite, Webdesign, CSS, Tools, Tutorials usw. Die Seite enthält verschiedene Textinhaltsblöcke. So sieht das Markup aus.
<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 -->Unser HTML-Markup ist fertig, jetzt ist es an der Zeit, etwas CSS-Stil hinzuzufügen.
Schritt Zwei: Hinzufügen von CSS-Klassen.
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;
}Schritt drei: Überprüfung des Spielplatzes „jQuery”.
Zunächst stellen wir sicher, dass beim Klicken auf die Menülinks das entsprechende Div nach oben gescrollt werden sollte. Wie Sie im folgenden Code sehen können, entfernen wir beim Klicken auf den Menüelement-Link die „aktive” Klasse des aktuell ausgewählten Menüelements und fügen die aktive Klasse dem angeklickten Element-Link hinzu.
Dann erhalten wir die ID des angeklickten Elements. this.hash gibt „#foo” zurück, was der ID-Selektor ist. Daher ist $(this.hash) dasselbe wie $(“#foo") und es wird das Element mit der ID foo auswählen.
$('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);
});
});Beim Scroll-Ereignis prüfen wir die Position der Elemente anhand des Scrollbetrags sowie der Summe ihrer Höhe und Position. Auf dieser Grundlage fügen wir die aktive Klasse der Menüpunkte hinzu und entfernen sie.
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");
}
});
}und zuletzt beim Scrollen der Seite prüfen wir, ob die Seitenleiste klebrig ist oder nicht.
$(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');
}
});Hier ist das vollständige Skript.
<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>Das ist es, es ist einfach richtig? Genießen! Vergessen Sie nicht, sich die Demo anzusehen.
Live-Demo und Quellcode
Hier sehen Sie dieses Aktionsmenü in Live-Aktion. Außerdem können Sie die Quelldateien herunterladen, damit Sie sie bearbeiten und direkt verwenden können, was immer Sie möchten.