如何在选择或滚动目标#div时更改锚点颜色

Question

我希望在锚点目标在视图中时更改特定锚点的颜色。我有一个几乎可以工作的jquery脚本，因为它改变了锚颜色，但直到我从目标向下滚动10px左右。此外，目标div的高度和它们与页面顶部的距离也不同。我已经尝试过使用填充和边距，并且已经找到了一些成功的目标div中的不同元素，如#div h1，但我宁愿只针对#div。

$(document).scroll(function(){
    if($(this).scrollTop()>=$('#main-page').position().top){
        $("#main").css("color","#ff2a2a");
        $("#news,#about").css("color","#fff");
    }
});

...然后我重复一遍，因为页面上有很多部分。