如何使用jQuery offset（）更改滚动条上每个元素的颜色？

我写了一个脚本，当导航通过某个点时，它会使我的导航停留在屏幕的顶部。它工作得很好，所以我决定尝试编写另一个脚本，当它到达页面中的部分时，在导航上突出显示该部分。唯一的问题是我估计了每个部分的像素数量。我知道我可以使用jQuery.offset（）使其更精确，但我不确定如何在当前脚本中编写它。下面是相关的HTML和javaScript。我真的很感激任何可靠的建议。谢谢

<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');
    }

    });

});

主页
购买体验
以物易物
预览
关于

$（函数（）{
var num=460；//修改样式前的像素数
var num2=2862；
var num3=3715；
var num4=4510；
$（窗口）.on（'scroll'，函数（）{
if（$（窗口）.scrollTop（）>num4）
{$（'.pink bar'）.addClass（'fixed'）；
$（'#menu-5'）.addClass（'ScrollNav'）；
$（'#menu-4，#menu-3，#menu-2'）。removeClass（'ScrollNav'）；
}else if（$（窗口）.scrollTop（）>num3）
{$（'.pink bar'）.addClass（'fixed'）；
$（'#menu-4'）.addClass（'ScrollNav'）；
$（'#menu-5，#menu-3，#menu-2'）。removeClass（'ScrollNav'）；
}else if（$（窗口）.scrollTop（）>num2）
{$（'.pink bar'）.addClass（'fixed'）；
$（'#menu-3'）.addClass（'ScrollNav'）；
$（'#menu-4，#menu-5，#menu-2'）。removeClass（'ScrollNav'）；
}else if（$（窗口）.scrollTop（）>num）{
$（'.pink bar'）.addClass（'fixed'）；
$（'#menu-2'）.addClass（'ScrollNav'）；
$（'#menu-3，#menu-5，#menu-3'）。removeClass（'ScrollNav'）；
}否则{
$（'.pink bar'）.removeClass（'fixed'）；
$（'#menu-2，#menu-3，#menu-4，#menu-5'）。removeClass（'ScrollNav'）；
}
});
});

关于：

var num = $('#menu-1').offset().top;
var num2 = $('#menu-2').offset().top; 

根据样式，您可能需要稍微调整以考虑边距和边框

---

更好的方法是为所有菜单项指定一个类，然后使用

$（'.menu class'）遍历所有菜单项。每个（…）

，并在给定它们的（调整的偏移量）和当前位置的情况下决定要做什么。这将使它可以扩展到更多的元素

将示例发布到JSFIDLE？