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＆gt;当前 - ＆gt;首先显示如果first.y＆lt;当前＆lt;第二 - ＆gt;显示第二等等

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

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

Answer 2

不是滚动而是可靠的解决方案，检测mouseenter并将活动类分配给链接。

$('section').mouseenter(function() {
  $('nav a[href="#'+$(this).attr('id')+'"]').addClass('active').siblings('nav a').removeClass('active');
});

<强> FIDDLE

更新：此处有滚动解决方案

$(document).scroll(function() {
  $('nav a[href="#'+$('section:hover').attr('id')+'"]').addClass('active').siblings('nav a').removeClass('active');
});

Answer 3

一些小的javascript可以做到这一点：

<script>
$(function(){
    $('a').click(function(){
        $('a').removeClass('active');
        $(this).addClass('active');
    });
})
</script>

CHECK DEMO

<强> [增订]

只需在每个链接中添加ID：

    <nav>
        <a id="a" href="#menu1" class="active">menu1</a>
        <a id="b" href="#menu2">menu2</a>
        <a id="c" href="#menu3">menu3</a> 
        <a id="d" href="#menu4">menu4 </a>
    </nav>

如果存储单击的元素a#id，然后在滚动页面时添加类，那该怎么办？检查一下 - DEMO

这是更新后的代码 -

<script>
$(function(){
    var id;
    $(document).on('click','a',function(){
        id = $(this).attr('id');
    }).scroll(function(){
        $('a').removeClass('active');
        $("#"+id).addClass('active');        
    });
})
</script>

Answer 4

部分工作解决方案让您入门：http://jsfiddle.net/nYw35/4/

$(document).scroll(function () {

    var scroll_top = $(document).scrollTop();
    var one_top = $('#menu1').position().top;
    var two_top = $('#menu2').position().top;

    if (scroll_top > one_top && scroll_top < two_top) {
        $('a[href="#menu1"]').removeClass('active');
        $('a[href="#menu2"]').addClass('active');
    }

});

Answer 5

为所有菜单链接指定唯一ID。在所有链接的click事件上调用一个函数，并使用此属性将该id传递给该函数并使用该ID为该相应链接的链接添加活动类。

当我向下滚动页面时突出显示导航链接

5 个答案: