Главная » JavaScript » Примеры JavaScript » Анимация анкорного меню на JS
26 0  

Анимация анкорного меню на JS

Как сделать анимацию меню для лендинга при прокрутке вниз и вверх. Тоисть когда рамка секции вверху экрана к меню добавлялся новый класс.

Сам скрипт:

// active class of menu items onscroll
window.addEventListener('scroll', () => {
	let scrollDistance = window.scrollY;

	if (window.innerWidth > 768) {
		document.querySelectorAll('.section').forEach((el, i) => {
			if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
				document.querySelectorAll('.nav a').forEach((el) => {
					if (el.classList.contains('active')) {
						el.classList.remove('active');
					}
				});

				document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
			}
		});
	}
});


HTML разметка.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Lazy YouTube</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<nav class="nav">
		<ul>
			<li><a href="#" class="active">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
			<li><a href="#">Four</a></li>
			<li><a href="#">Five</a></li>
		</ul>
	</nav>

	<section class="section"></section>
	<section class="section"></section>
	<section class="section"></section>
	<section class="section"></section>
	<section class="section"></section>
	<script src="script.js"></script>
</body>
</html>




Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2021