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 的高度并将其分配给变量 if first.y > 当前 -> 显示第一个 if first.y < current < secondary -> 显示第二个等等

这里是一些代码来说明示例

$(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)可能会更好