Как анимировать селектор меню при скролле?

Question

[g3rmes]

Имеется простая разметка в виде менюшки, div'ов, на которые пункты менюшки ссылаются и небольшого stick'а, который должен двигаться под менюшкой в зависимости от того, на каком блоке контента пользователь находится.

Также имеется js - код, который делает нужный пункт менюшки активный при скролле и при нажатии, а также делает шапку фиксированной при определенном скролле от top'a

$(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>

Задача - заставить stick под менюшкой двигаться в зависимости от того, на каком блоке контента я нахожусь. То - есть, я начинаю с первого блока, скроллю, и как только я налезаю на второй блок, палочка передвигается под второй пункт меню. Если что - либо не понятно, то подробнее на все это дело можно поглядеть здесь.

Answer 1

[g3rmes]

Уже все решил, кому интересно, вот:

$(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");
		}
	});
}
});