javascript - 向下滚动页面时突出显示导航链接

Question

我有一个简单的页面，如下面的代码

<nav>
    <a  href="#menu1">menu1</a>
    <a  href="#menu2">menu2</a>
    <a  href="#menu3">menu3</a>
    <a  href="#menu4">menu4 </a>
</nav>


<section id="menu1"></section>      
<section id="menu2"></section>          
<section id="menu3"></section>          
<section id="menu4"></section>

如何在向下滚动页面时更改部分时突出显示每个导航链接？

是否可以使用css来完成？

这是 fiddle 中的示例

我需要在更改部分时更改灰色背景颜色...

Answer 1

概念分解:

获取每个div的高度并赋值给一个变量如果 first.y > 当前 -> 首先显示if first.y < current < second -> show second etc etc

这里有一些代码来说明这个例子

$(document).scroll(function() {
    var scroll_top = $(document).scrollTop();
    var div_one_top = $('#one').position().top;
    var div_two_top = $('#two').position().top;

    if(scroll_top > div_one_top && scroll_top < div_two_top) {
        //You are now past div one
        $('#sidebar').text('One');
    } else if( scroll_top > div_two_top) {
        //You are now past div two
       $('#sidebar').text('Two');
    }
});

在你的情况下，一个开关(y pos)可能会更好