Использование jQuery для переключения классов в зависимости от положения прокрутки

Question

Я уже видел несколько постов, связанных с этой проблемой, но ни одно из их решений не сработало в моем случае.

По сути, я создаю одностраничный сайт с липкой навигацией. Элементы навигации при нажатии прокручивают страницу до правильного местоположения, и в свою очередь активный класс применяется к правильному элементу навигации. Элементы навигации должны иметь такое же поведение, если пользователь прокручивает до заданного местоположения.

Для аргументов ради html для этого:

<section id="one" style="height:100vh">
  <h2>one</h2>
</section>
<section id="two" style="height:100vh">
  <h2>two</h2>
</section>
<section id="three" style="height:100vh">
  <h2>three</h2>
</section>

и jQuery:

var $window = $(window);
var link = $('.link-js');

$window.on('scroll', function() {
    $('section').each(function() {
        if ($window.scrollTop() == $(this).offset().top) {
            var name = $(this).attr('id');
            link.removeClass('nav-active');
            $('a[href="#' + name + '"]').addClass('nav-active');

            console.log(name);
        }
    })
});

link.click(function(e) {
    var hash = $(this).attr('href');
    $('html, body').animate({ scrollTop: $(hash).offset().top }, 600);

    e.preventDefault();
});

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

Я понимаю, что это очень специфично c вопрос, но если бы кто-то мог пролить свет на это, я был бы очень благодарен.