0

Возникла такая задача: сверстать страницу с меню (навигацией по странице).
Необходимо знать, виден ли сейчас элемент пользователю на странице, или пользователь ещё не дошёл до этого элемента. Знать это нужно для того, чтобы подсветить через JS текущий пункт меню, который просматривает пользователь.
Собственно, подскажите, как узнать расстояние между элементом <h1> и верхним краем окна браузера. Или посоветуйте ещё способы узнать, виден ли сейчас пользователю конкретный элемент. Желательно без JQuery.

1 ответ 1

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)){
            //тут вешаешь класс на элемент меню
            //только надо еще допилить случаи когда видно больше одного блока
        }
    })
})

Вешаешь скролл на страницу, в нем пробегаешь по нужным блокам, определяешь какой сейчас виден и подсвечиваешь нужный пункт меню

2
  • Хм, спасибо, буду пробовать 5 янв 2018 в 11:38
  • перенеси необходимый код из ссылки в ответ
    – Grundy
    5 янв 2018 в 17:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.