tananin
11/18/2018 - 1:24 PM

Меняем активный пункт меню при прокрутке страницы

README.md
content_copyfile_download
  • Rendered
  • Source

Очень часто на одностраничниках можно встретить такую фишку, когда начинаешь прокручивать страницу, верхнее меню плавно едет за вами и в зависимости от того, какой вы сейчас раздел просматриваете, будет выделен соответствующий пункт меню.

HTML

Структура меню

<header class="sticky-header">
    <nav class="top-menu">
        <ul>
            <li><a class="active" href="#home">Главная</a></li>
            <li><a href="#about">О нас</a></li>
            <li><a href="#service">Услуги</a></li>
            <li><a href="#contact">Контакты</a></li>
        </ul>
    </nav>
</header>

Структура страницы

<section id="home">
Здесь любой контент...
</section>
<section id="about">
Здесь любой контент...
</section>
<section id="service">
Здесь любой контент...
</section>
<section id="contact"> Здесь любой контент... </section>

CSS

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .8);
}
.top-menu ul {
    margin: 20px 0;
    text-align: center;
}
.top-menu ul li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
}
.top-menu a {
    color: #fff;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}
.top-menu a:hover,
.top-menu a.active {
    color: #e0a2a2;
}
main.js
content_copyfile_download
$(document).ready(function () {
		$(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;
			$target = $(target);
			$('html, body').stop().animate({
				'scrollTop': $target.offset().top+2
			}, 500, 'swing', function () {
				window.location.hash = target;
				$(document).on("scroll", onScroll);
			});
		});
	});
 
	function onScroll(event){
		var scrollPosition = $(document).scrollTop();
		$('nav a').each(function () {
			var currentLink = $(this);
			var refElement = $(currentLink.attr("href"));
			if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
				$('nav ul li a').removeClass("active");
				currentLink.addClass("active");
			}
			else{
				currentLink.removeClass("active");
			}
		});
	}