How do I change the color of each element on scroll using jQuery offset()?

How do I change the color of each element on scroll using jQuery offset()?

I wrote a script that makes my navigation stick to the top of the screen
once it passes a certain point. It works great so I decided to try to
write another script that highlights the section on the nav as it reaches
the section in the page. Only problem is I estimated the amount of pixels
to each section. I know I can use the jQuery .offset() to make this more
precise but I'm not sure how to write that within my current script. Below
is the relevant HTML and javaScript. I would really appreciate any solid
suggestions. Thanks.
<nav class='pink-bar'><!--<img class='nav' src='assets/nav.png'
alt='navigation bar' /> -->
<div class='content'>
<ul class='menu'>
<li id='menu-1'>Home</li>
<li id='menu-2'>Buy The Experience</li>
<li id='menu-3'>Barter</li>
<li id='menu-4'>Preview</li>
<li id='menu-5'>About</li>
</ul>
$(function() {
var num = 460; //number of pixels before modifying styles
var num2 = 2862;
var num3 = 3715;
var num4 = 4510;
$(window).on('scroll', function () {
if ($(window).scrollTop() > num4)
{ $('.pink-bar').addClass('fixed');
$('#menu-5').addClass('ScrollNav');
$('#menu-4, #menu-3, #menu-2,').removeClass('ScrollNav');
} else if ($(window).scrollTop() > num3)
{ $('.pink-bar').addClass('fixed');
$('#menu-4').addClass('ScrollNav');
$('#menu-5, #menu-3, #menu-2 ').removeClass('ScrollNav');
} else if ($(window).scrollTop() > num2)
{ $('.pink-bar').addClass('fixed');
$('#menu-3').addClass('ScrollNav');
$('#menu-4, #menu-5, #menu-2').removeClass('ScrollNav');
} else if ($(window).scrollTop() > num) {
$('.pink-bar').addClass('fixed');
$('#menu-2').addClass('ScrollNav');
$('#menu-3, #menu-5, #menu-3').removeClass('ScrollNav');
} else {
$('.pink-bar').removeClass('fixed');
$('#menu-2, #menu-3, #menu-4, #menu-5').removeClass('ScrollNav');
}
});
});