Зміна активного пункту меню під час прокручування сторінки за допомогою jQuery
Цей підручник навчить вас, як змінити активний пункт меню під час прокручування сторінки без використання спеціальних файлів js або плагіна.
У цій демонстрації ми будемо використовувати прості функції jQuery для досягнення нашої мети.
Очікуваний результат:
Під час прокручування сторінки вибраний (активний) пункт меню буде змінено відповідно до поточного розділу, який переглядається. Це також станеться, якщо користувач клацне посилання будь-якого пункту меню. Цей тип реалізації хороший для односторінкових веб-сайтів із фіксованою панеллю меню. Давайте розпочнемо.
Перший крок: створення розмітки
Розмітка дуже проста і легка. Ми збираємося створити просту панель навігації з кількома пунктами меню, як у нас на www.instantshift.com. У ньому є кілька елементів, як-от Home, Web Design, CSS, Tools, Tutorials тощо. Сторінка матиме різні блоки текстового вмісту. Ось як виглядає розмітка.
<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 готова, тепер настав час додати стиль CSS.
Крок другий: додавання класів 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;
}Крок третій: перевірка ігрового майданчика “jQuery".
Перш за все ми переконаємося, що після натискання посилань меню відповідний div має прокручуватися вгору. Як ви можете бачити в наведеному нижче коді, після натискання посилання на пункт меню ми видаляємо «активний» клас поточного вибраного пункту меню та додаємо активний клас до посилання на пункт, на який натиснули.
Потім ми отримуємо ідентифікатор клацнутого елемента. this.hash поверне «#foo», який є селектором ідентифікатора. Отже, $(this.hash) те саме, що $(“#foo”), і він вибере елемент з 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);
});
});Під час події прокручування ми перевіряємо положення елементів щодо величини прокручування, а також суми їх висоти та положення. На цій основі ми додаємо та видаляємо активний клас пунктів меню.
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");
}
});
}і під час останньої події прокручування сторінки ми перевіряємо, чи буде бічна панель липкою чи ні.
$(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');
}
});Ось повний сценарій.
<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>Ось так, це легко, правда? Насолоджуйтесь! Не забудьте переглянути демо.
Жива демонстрація та вихідний код
Тут ви можете побачити це меню дій у реальному часі. Крім того, ви можете завантажити вихідні файли, щоб ви могли редагувати та безпосередньо використовувати їх у будь-якій формі.