Привет! Да, задача тривиальная и решений в нете полно. Но мне они все показались очень сложными. Я сделал сам. Всё работает, даже в IE, если только синтаксис перевести из ES6 в ES5 )) Но для меня сложной оказалась задача сделать так, чтобы при прокрутке страницы и появлении в окне определённых кусков текста с заголовком становилась активной соответствующая ссылка (подсвечивалась жёлтым). Я сделал через getBoundingClientRect(). Однако в задаче требуется всё же сделать с помощью JQ, а getBoundingClientRect() чистый JS... Подскажите, есть ли какой-либо аналог этот функции в JQ? Или, может, есть какие-то более "элегантные" способы решения этой задачи на JQ? (текст был изначально длиннее, чтобы была прокрутка, пришлось их для размещения здесь укоротить, чтобы можно было разместить)
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
<style>
html, body{
margin: 0;
background: #eee;
}
.menu{
position: fixed;
top: 0;
left: 0;
background: #000;
color: #fff;
height: 50px;
width: 100%;
}
.menu a{
color: inherit;
line-height: 50px;
font-size: 20px;
margin: 0 10px;
transition: color 0.4s;
}
.menu a.active{
color: #ff0;
}
.content{
margin-top: 70px;
}
</style>
</head>
<body>
<div class="menu">
<a href="#about">О курсе</a>
<a href="#price">Стоимость</a>
<a href="#app">Запись</a>
<a href="#nz">Нз</a>
</div>
<div class="content">
<h2 id="about">О курсе</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2 id="price">Стоимость</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2 id="app">Запись</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2 id="nz">Нз</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="scroll-top-btn">
<svg viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7 22.7l9-9c.2-.2.3-.5.3-.7 0-.3-.1-.5-.3-.7l-9-9c-.2-.2-.4-.3-.7-.3s-.5.1-.7.3l-1.4 1.4c-.4.4-.4 1 0 1.4l4 4c.3.3.1.9-.4.9H1c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h16.6c.4 0 .7.5.4.9l-4 4c-.4.4-.4 1 0 1.4l1.4 1.4c.2.2.4.3.7.3.2 0 .4-.1.6-.3z"/>
</svg>
</button>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
$(function(){
const $scrollTopBtn = $('.scroll-top-btn'),
$links = $('.menu a');
let docHeight = $('body').height();
hightlightLink();
showHideScroll();
$links.on('click', function(e) {
e.preventDefault();
$link = $(this);
$target = $($link.attr('href'));
switchClass($links, $link);
$('html, body').animate({
scrollTop: $target.offset().top - 70
}, 700);
});
$(window).on('scroll', showHideScroll).on('scroll', hightlightLink);
$scrollTopBtn.on('click', function() {
let scrollTime = 1500 * $(window).scrollTop()/docHeight;
$('html, body').animate({
scrollTop: 0
}, scrollTime);
});
function showHideScroll() {
if($(window).scrollTop() > 200) {
$scrollTopBtn.fadeIn();
} else {
$scrollTopBtn.fadeOut();
}
}
function hightlightLink() {
$links.each(function(i, link) {
$link = $(link);
$target = $($link.attr('href'));
$distance = $target[0].getBoundingClientRect().top;
console.log($target[0].clientRect());
if($distance >= 0 && $distance < $(window).height()/3) {
switchClass($links, $link);
}
});
}
function switchClass($links, $link) {
$links.removeClass('active');
$link.addClass('active');
}
});