Как сделать подобный эффект при прокрутке?

Question

[anton_trofimov95]

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

Answer 1

[ptvalx]

Открыл консоль браузера. Навел на кружок. Повесил брейкпоинт на изменение атрибутов кружка и всплыл этот код:

jQuery(window).scroll(function(){
         var $sections = $('.section');
	$sections.each(function(i,el){
        var top  = $(el).offset().top-100;
        var bottom = top +$(el).height();
        var scroll = $(window).scrollTop();
        var id = $(el).attr('id');
    	if( scroll > top && scroll < bottom){
            $('#pp-nav1 ul li a.active').removeClass('active');
			$('#pp-nav1 ul li a[href="#'+id+'"]').addClass('active');

        }
    })
 });

Comments

[anton_trofimov95]

ptvalx а я подумал через observer api сделано, там если в source глянуть и найти главный js файл, то первые строчки вроде тоже нужны, верно?

[ptvalx]

anton_trofimov95, не знаю, что там в первых строчка. Данный код самодостаточен при наличии jquery. Срабатывает событие скролла - перебираются блоки в блоке с контентом. Высчитывается, находится ли блок в зоне видимости. Если да - добавляется класс active для кружка, если нет - класс удаляется.

Примерно так должно быть (код не проверял):

<div id="indicators">
<div id="ind-prices" class="indicator"> 1 </div>
<div id="ind-contacts" class="indicator"> 2 </div>
</div>

<div class="section">
<div id="prices"> цены </div>
<div id="contacts"> контакты </div>
</div>

<script>
jQuery(window).scroll(function(){
         var $sections = $('.section');
  $sections.each(function(i,el){
        var top  = $(el).offset().top-100;
        var bottom = top +$(el).height();
        var scroll = $(window).scrollTop();
        var id = $(el).attr('id');
    	if( scroll > top && scroll < bottom){
            $('#indicators .indicator.active').removeClass('active');
      $('#ind-' + id).addClass('active');

        }
    })
 });
</script>

[anton_trofimov95]

ptvalx, спасибо, ваши наработки взял и доработал - все вышло https://codepen.io/Superusernameone/pen/gOPrgoG