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

Question

I have a simple page like the code below

<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>

How can I highlight each navigation link when I change the section, as I scroll down the page?

Is it possible to be done using css?

Here is an example in fiddle

I need the grey background color to change when i change section...

Answer 1

Concept broken down:

Get at what height each div is and assign it to a variable if first.y > current -> show first if first.y < current < second -> show second etc etc

here is some code to illustrate the example

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

in your case a switch(y pos) might be better

Answer 2

Not on scroll but solid solution, detects mouseenter and by that assigning active class to links.

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

FIDDLE

Update: Here's on scroll solution

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

Answer 3

A little javascript can do this :

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

CHECK DEMO

[UPDATED]

Just add the ids in every links:

    <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>

How about that if you store the clicked element a#id and then add the class when page is being scroll. Check this - DEMO

Here is the updated code -

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

Answer 4

Partly working solution to get you started: 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

Give unique id to all menu link. Call one function on click event of all that link and pass that id using this attribute to that function and add active class by using for link of that respective link using that id.