Возникла такая задача: сверстать страницу с меню (навигацией по странице).
Необходимо знать, виден ли сейчас элемент пользователю на странице, или пользователь ещё не дошёл до этого элемента. Знать это нужно для того, чтобы подсветить через JS текущий пункт меню, который просматривает пользователь.
Собственно, подскажите, как узнать расстояние между элементом <h1>
и верхним краем окна браузера. Или посоветуйте ещё способы узнать, виден ли сейчас пользователю конкретный элемент. Желательно без JQuery.
Добавить комментарий
|
1 ответ
https://gist.github.com/jjmu15/8646226
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var html = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
);
}
$(window).scroll(function(){
$(".block").each(function(index,element){
if(isInViewport(element)){
//тут вешаешь класс на элемент меню
//только надо еще допилить случаи когда видно больше одного блока
}
})
})
Вешаешь скролл на страницу, в нем пробегаешь по нужным блокам, определяешь какой сейчас виден и подсвечиваешь нужный пункт меню