IvanInvanov
@IvanInvanov
Новичок

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

Добрый день, подскажите пожалуйста. У меня есть фиксированный аппбар с якорными ссылками, я хочу чтобы при пролистывании страницы, в аппбаре появлялось нижнее подчеркивание под той якорной ссылкой, которая посылает на блок, который видит сейчас пользователь. Можно ли это реализовать на одном JS?(с jQuery пока что не работал).
<div>
		<header>
			<div class="header_name">Golden</div>
			<div class="header_items">
				<a href="#header">Home</a>
				<a href="#services">Services</a>
				<a href="#portfolio">Portfolio</a>
				<a href="#about">About</a>
				<a href="#contact">Contact</a>
			</div>
		</header>
		<!-- Home-->
		<div class="header" id="header">
			...
		</div>
		
		<!-- Services -->
		<div class="services" id="services">
			...
		</div>

		<!-- Portfolio -->
		<div class="portfolio" id="portfolio">
			...
		</div>

		<!-- About Us -->
		<div class="about" id="about">
			...
		</div>

		<!-- Contact Us -->
		<div class="contact" id="contact">
			...
		</div>
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
hzzzzl
@hzzzzl
будь хакиром, делай по-модному
https://developer.mozilla.org/en-US/docs/Web/API/I...

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Тут вот был вопрос, как реализовать похожий функционал. (вроде совпадает с вашими потребностями)
Как реализовать скролл элементов сайдбара?
Я там дал ссылку на скрипт js который в теории это делает
Ответ написан
Chefranov
@Chefranov
Front-End, Back-End
// ACTIVE ITEM OF MENU
     $(window).scroll(function () {
         var $sections = $('.section');
         $sections.each(function (i, el) {
             var top = $(el).offset().top - 0;
             var bottom = top + $(el).height();
             var scroll = $(window).scrollTop();
             var id = $(el).attr('id');
             if (scroll > top && scroll < bottom) {
                 $('.header_items a.active').removeClass('active');
                 $('.header_items a[href$="' + id + '"]').addClass('active');
             }
         })
     });

Добавьте каждому разделу класс section
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
17 окт. 2019, в 03:16
37500 руб./за проект
16 окт. 2019, в 22:58
3200 руб./за проект
16 окт. 2019, в 22:43
3000 руб./за проект