Изменение активного элемента меню при прокрутке страницы с помощью jQuery
Этот туториал научит вас, как изменить активный пункт меню при прокрутке страницы без использования каких-либо специальных js-файлов или плагинов.
В этой демонстрации мы будем использовать простые функции jQuery для достижения нашей цели.
Ожидаемый результат:
При прокрутке страницы выбранный (активный) пункт меню будет изменен в соответствии с текущим просматриваемым разделом. Это также произойдет, если пользователь нажмет на любую ссылку пункта меню. Этот тип реализации хорош для одностраничных веб-сайтов с фиксированной строкой меню. Давайте начнем.
Первый шаг: создание разметки
Разметка очень проста и легка. Мы собираемся создать простую панель навигации с несколькими пунктами меню, как на www.instantshift.com. На нем есть несколько элементов, таких как «Главная», «Веб-дизайн», «CSS», «Инструменты», «Учебники» и т. д. Страница будет иметь различные блоки текстового содержимого. Вот как выглядит разметка.
<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") и выберет элемент с идентификатором 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>Вот и все, несложно? Наслаждаться! Не забудьте проверить демо.
Живая демонстрация и исходный код
Здесь вы можете увидеть это меню действий в живом действии. Кроме того, вы можете загрузить исходные файлы, чтобы редактировать и напрямую использовать их в том, что вам нравится.