Как при скролле до секции переключать якорь?

Question

[sasha761]

Добрый день.
У меня на странице есть 4 якоря (выглядят как точки от слайдера с position fixed ) , и эти якоря подвязаны к секциям . Само переключение якорей я сделал и все работает нормально, НО не совсем понимаю как мне правильно сделать переключение якоре когда происходит скролл до секции.
Например у меня сразу же при заходе на страницу активен первый якорь (ему добавляется класс is-active) потом когда скроллом дохожу до второй секции то классы должны переключиться на второй якорь.

Первый участок кода работает как надо , проблема во втором

$(".l-boolean").on("click","a", function (event) {

  event.preventDefault();

  $('.l-boolean a').removeClass('is-active');
  $(this).addClass('is-active');  

  var id  = $(this).attr('href');
  var fixedHeader = $('header .hf').height(),
      top = $(id).offset().top - fixedHeader;

  $('body,html').animate({scrollTop: top}, 1000);
});



$('.js-section').each(function () {
  var sectionID = $(this).attr('id');
  var sectionTop = $(this).offset().top;
  console.log(sectionID, sectionTop); 


  $(window).scroll(function () {
    let screenTop = $(document).scrollTop();

    if (screenTop > sectionTop) {
      console.log('11');
      $('main').find('.l-boolean a' + '#' + sectionID).addClass('is-active');
    }
  }); 
});

Answer 1

[Costa Concordia]

window.addEventListener("scroll", event => {
  let fromTop = window.scrollY;

  sectionBlock.forEach(block => {
    let section = document.querySelector(block.hash);

    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      block.classList.add("active");
    } else {
      block.classList.remove("active");
    }
  });
});

Comments

[sasha761]

вставил и даже попробовал на jquery перевести но почему-то не пашет

[sasha761]

Costa Concordia в section null попадает

Answer 2

[sasha761]

Сделал пока что вот так . Все работает, НО такой момент , ниженяя секция у меня не на весь экран и получается когда доматываешь до конца то скрипт не видит эту нижнюю секцию (высоты секции не хватает )
Вот код

$(window).scroll(function (event) {
    let screenTop = $(document).scrollTop();

    $('.js-section').each(function(block) {
      let section = $(this).attr('id');

      if (
        $(this).offset().top <= screenTop &&
        $(this).offset().top + $(this).height() > screenTop
      ) {
        console.log('1', section);
        console.log('1', '#' + section);
        $('.l-boolean').find('a' + '#' + section).addClass('is-active');
      } else {
        console.log('2', section);
        $('.l-boolean').find('a' + '#' + section).removeClass('is-active');
      }

    });
  });