javascript - Highlight navigation link as i scroll down the page - Stack Overflow

admin管理员组

文章数量:1391929

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 22, 2014 at 12:19 dimitrisddimitrisd 65222 gold badges1111 silver badges3232 bronze badges 4

• Possible duplicate - stackoverflow./questions/20034555/… – Paulie_D Commented Jul 22, 2014 at 12:21
• 1 With your HTML structure it looks like you would like to use fullpage.js – Alvaro Commented Jul 22, 2014 at 12:27
• 3 $('section').mouseenter(function() { $('nav a[href="#'+$(this).attr('id')+'"]').addClass('active').siblings('nav a').removeClass('active'); }); - FIDDLE – Milan and Friends Commented Jul 22, 2014 at 12:32
• @mdesdev add it as answer, its a rather cool solution! – hahaha Commented Jul 22, 2014 at 12:43

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

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

Partly working solution to get you started: http://jsfiddle/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');
    }

});

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.

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>

本文标签： javascriptHighlight navigation link as i scroll down the pageStack Overflow