How to animate the menu selector on scroll?

Question

JavaScript

There is a simple markup in the form of a menu, divs that the menu items refer to, and a small stick that should move under the menu depending on which block of content the user is on.

There is also a js code that makes the desired menu item active on scroll and on click, and also makes the header fixed at a certain scroll from top

$(window).on('scroll', (function() {
  if ($(this).scrollTop() > 299) {
    $('.navigation').addClass("navigation-fixed");
    $('#block1').css("margin-top", "50px");
    $('.navigation-pos').addClass("navigation-pos-animate");
    $('.fa-home').addClass('fa-home-visible');
    $('.nav-button-selected').addClass('nav-button-selected-visible');
    $('.inner-navigation-pos').addClass('inner-navigation-pos-animate');
  } else {
    $('.navigation').removeClass("navigation-fixed");
    $('#block1').css("margin-top", "0px");
    $('.navigation-pos').removeClass("navigation-pos-animate");
    $('.fa-home').removeClass('fa-home-visible');
    $('.nav-button-selected').removeClass('nav-button-selected-visible');
    $('.inner-navigation-pos').removeClass('inner-navigation-pos-animate');
  }
}));

$(document).on("scroll", onScroll);

$('.navigation-pos').on('click', 'a', function(e) {

  e.preventDefault();

  $(document).off("scroll");
  $('a').each(function() {
    $(this).removeClass('active');
  });
  $(this).addClass('active');

  var target = this.hash,
    $target = $(target);
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top - 50
  }, 800, function() {
    window.location.hash = target;
    $(document).on("scroll", onScroll);
  });
});

function onScroll() {
  var scrollPos = $(document).scrollTop();
  $('.inner-nav a').each(function() {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top - 50 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('.inner-nav a').removeClass("active");
      currLink.addClass("active");
    } else {
      currLink.removeClass("active");
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-navigation-pos">
  <ul class="inner-nav">
    <li class="nav-button"><a href="#block1">About me</a></li>
    <li class="nav-button"><a href="#block2">My works</a></li>
    <li class="nav-button"><a href="#block3">Blog</a></li>
    <li class="nav-button"><a href="#block4">Contacts</a></li>
  </ul>
  <div class="nav-button-selected"></div>
</div>
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>

The task is to make the stick under the menu move depending on which block of content I am on. That is, I start from the first block, scroll, and as soon as I get on the second block, the wand moves under the second menu item. If something is not clear, then you can look at the whole thing in more detail here .

Answer 1

Already decided everything, for those who are interested, here:

$(function() {

  // Липкая шапка, анимация home-кнопки

  $(window).on('scroll', (function() {
    if ($(this).scrollTop() > 299) {
      $('.navigation').addClass("navigation-fixed");
      $('#block1').css("margin-top", "50px");
      $('.navigation-pos').addClass("navigation-pos-animate");
      $('.fa-home').addClass('fa-home-visible');
      $('.nav-button-selected').addClass('nav-button-selected-visible');
      $('.inner-navigation-pos').addClass('inner-navigation-pos-animate');
    } else {
      $('.navigation').removeClass("navigation-fixed");
      $('#block1').css("margin-top", "0px");
      $('.navigation-pos').removeClass("navigation-pos-animate");
      $('.fa-home').removeClass('fa-home-visible');
      $('.nav-button-selected').removeClass('nav-button-selected-visible');
      $('.inner-navigation-pos').removeClass('inner-navigation-pos-animate');
    }
  }));

  $(document).on("scroll", onScroll);

  // Анимация скролла при клике на пункт меню
  var lastactive;

  $('.navigation-pos').on('click', 'a', function (e) {

    e.preventDefault();

    $(document).off("scroll");
    $('a').each(function () {
      $(this).removeClass('active');
    });
    $(this).addClass('active');

    var left = $(this).position().left,
    width = $(this).width();
    $( ".nav-button-selected-visible" ).animate({
      width: width + 'px',
      left: left + 'px'
    }, 30);

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top-50
    }, 800, function () {
      window.location.hash = target;
      $(document).on("scroll", onScroll);
    });
  });

// Скролл-прогресс

function onScroll(){
  var scrollPos = $(document).scrollTop();

  $('.inner-nav a').each(function () {

    var currLink = $(this);
    var refElement = $(currLink.attr("href"));

    if (refElement.position().top-50 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $('.inner-nav a').removeClass("active");
      currLink.addClass("active");

      var left = currLink.position().left,
      width = currLink.width();

      if (lastactive!=currLink.attr('href')) {
        lastactive = currLink.attr('href');
        $( ".nav-button-selected-visible" ).stop().animate({
          width: width + 'px',
          left: left + 'px'
        }, 30);
      }
    } else {
      currLink.removeClass("active");
    }
  });
}
});