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

Question

[DeniSidorenko]

Есть левый сайдбар который постоянно фиксированно идет за страницей. ТАм пункты меню, отзывы, сертификаты и.т.д. При клике на нем идет скролл на саму секцию. Можно ли сделать что когда проходишь мимо секции менялись стили для пунктов из левого сайдбара?

Comments

[Hyubert]

Можно ли сделать что когда проходишь мимо секции менялись стили для пунктов из левого сайдбара?

- да можно

Answer 1

[Ольга Ветер]

Да, через javascript, отслеживая либо высоту скролла и делая замену стилей/класса в нужный момент, либо навешивая на каждую секцию отслеживание события, когда блок попадает в видимую часть экрана и меняя его в этот момент. Возможно в решении это задачи вам поможет плагин fullpage.js

Answer 2

[Сергей Свиридонов]

Можно. Есть инструменты для этого.
Поиск работает!

Answer 3

[Владислав Бойченко]

Вот тут такое делал: тыц
Я подключал 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");
			}
		});
	}

Ищите тут

Comments

[dom1n1k]

Код, мягко говоря, с душком

[profesor08]

Удали не показывай этот код, особенно часть onScroll.

[Владислав Бойченко]

dom1n1k, profesor08 работает же.