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

Posted 2021-05-03

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

## 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;
    }

$(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");
			}
		});
	}