@DeniSidorenko

Как логически решить данную задачу?

Есть левый сайдбар который постоянно фиксированно идет за страницей. ТАм пункты меню, отзывы, сертификаты и.т.д. При клике на нем идет скролл на саму секцию. Можно ли сделать что когда проходишь мимо секции менялись стили для пунктов из левого сайдбара?
  • Вопрос задан
  • 165 просмотров
Пригласить эксперта
Ответы на вопрос 3
vetero4eg
@vetero4eg
Frontend
Да, через javascript, отслеживая либо высоту скролла и делая замену стилей/класса в нужный момент, либо навешивая на каждую секцию отслеживание события, когда блок попадает в видимую часть экрана и меняя его в этот момент. Возможно в решении это задачи вам поможет плагин fullpage.js
Ответ написан
Комментировать
Можно. Есть инструменты для этого.
Поиск работает!
Ответ написан
Комментировать
vladislav_boychenko
@vladislav_boychenko
Купаюсь в гривнах
Вот тут такое делал: тыц
Я подключал Sticky Kit для фиксации меню при скролле, весь код вот (вам тут не все нужно, это вся работа сайдбара):
$('.aside-nav ul li a').click(function(e){
		e.preventDefault();
		$('.aside-nav ul li').removeClass('active-aside-item');
		$(this).parent().addClass('active-aside-item');

		var this_hash = $.attr(this, 'href');
		$('html, body').animate({
			scrollTop: $( this_hash ).offset().top -10
		}, 500);
		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
			$('.sidebar').animate({
				left: '-=260'
			}, 300);
			$('.sidebar-overlay').fadeOut();
			$('body').css('overflow', 'initial');
		}

        location.hash = this_hash;
	}); 
	$(document).on("scroll", onScroll);
	function onScroll(event){
		var scrollPos = $(document).scrollTop();
		$('.aside-nav ul li a').each(function (){
			var currLink = $(this);
			var refElement = $(currLink.attr("href"));
			if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos){
				$('.aside-nav ul li a').closest('li').removeClass("active-aside-item");
				currLink.closest('li').addClass("active-aside-item");
			} else {
				currLink.removeClass("active-aside-item");
			}
		});
	}

Ищите тут
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы