Navbar add remove class from anchor when scrolling the page

Question

I'm new here, but I alreadyy searched a while for a solution not only on this site.

Ok, here's the problem:

I built a static page, with multiple sections. Each section can be shown up through an anchorlink in the navbar, which is static on the left side of the page. How can I achieve, that the link to the section, which is just shown on the screen, is active?

It should be pretty easy, if the sections would be in external html-files. But I can't find a way to make this happen in my case...

<div id="navbar">
    <ul>
         <li><h5><a href="#1" class="active">SERVICE</a> </br> </br></h5></li>
         <li><h5><a href="#2" class="inactive">LEISTUNGEN</a> </br> </br></h5></li>
         <li><h5><a href="#3" class="inactive">ÜBER UNS</a> </br> </br></h5></li>
         <li><h5><a href="#4" class="inactive">PARTNER</a> </br> </br></h5></li>
         <li><h5><a href="#5" class="inactive">KONTAKT</a> </br></h5></li>
    </ul>

I think of a JavaScript that changes the classes of the links onclick, but I can't get this to work...

Please help me, tell me what I should do!

Last but not least, please excuse my poor english and coding knowledge ;)

For further explanation of the page I want to create! This is my Navigation Menu, which has the fixed position on the left!

<div id="navbar">
        <ul>
             <li><h5><a href="#1">SERVICE</a> </br> </br></h5></li>
             <li><h5><a href="#2">LEISTUNGEN</a> </br> </br></h5></li>
             <li><h5><a href="#3">ÜBER UNS</a> </br> </br></h5></li>
             <li><h5><a href="#4">PARTNER</a> </br> </br></h5></li>
             <li><h5><a href="#5">KONTAKT</a> </br></h5></li>
        </ul>
</div>

It continues with one big section, which's contents are 4 small sections. These sections look like this:

<div id="weiss">
<div id="1" class="content section" data-id="1">



            <div class="page page-1">
                    <div class="topic">
                            <img class="mwlogo" src="media/logo.png"/>      
                    </div>

                    <div class="text">
                            <h2>...</h2>
                    </div>

                <div class="vorteile">

                    <div class="first">
                            <ol>
                                <li><p>...</li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                            </ol>
                    </div>

                    <div class="last">
                            <ol>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                                                <li><p>...</p></li>
                                                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                            </ol>
                    </div>

                </div>

            </div>


    </div>
<div>

I linked to the activemenuitem in the index.html:

<script type="text/javascript" src="functions/js/activemenuitem.js"></script>

It looks like this:

function checkActiveSection ()
{
    var fromTop = jQuery(window).scrollTop() ;
    jquery('#weiss .section'.each(function() {
        var sectionOffset = jQuery(this).offset() ;
        if ( sectionOffset.top <= fromTop )
        {
            jQuery('#navbar li').removeClass('active') ;
            jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;

        }
    }) ;
}

jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
    var idSectionGoto = jQuery(this).closest('li').data('id') ;
    $('html, body').stop().animate({
      scrollTop: jQuery('#weiss .section[data-id="'+idSectionGoto+'"]').offset().top
    }, 300,function(){
        checkActiveSection() ;
    });
     e.preventDefault() ;
}) ;

But the problem is still, that there seems to be no way for me, to get this to work! The script loads when loading the site, but no class is being added or removed from the menu classes. What do I have to do?! Please help me!

Do you mean something like this (on the right when you scroll) : https://developers.facebook.com/docs/web/share — Pierre Granger, Mar 22 '14 at 14:32
I think you might want to do this : http://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll — Pierre Granger, Mar 22 '14 at 14:34
@Pierre Granger Yes that's pretty much the right direction. Thx, I will try to get this done ;) — user3449855, Mar 22 '14 at 15:29
@PierreGranger Could you help me integrate that http://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll into my site? What do I have to customize? — user3449855, Mar 22 '14 at 15:46

Von · Answer 1 · 2014-03-22T16:11:00.200

<script type="text/javascript">
    $(document).ready(function(){
       $(window).scroll(function(e){
var topMargin = jQuery(window).scrollTop() ; 
         if(topMargin  < 100)
         {
                $("#navbar li a").removeClass('active');
            $("#navbar li a.chap1").addClass('active');
         }
         else if(topMargin > 100 && topMargin <200)
         {
              $("#navbar li a").removeClass('active');
                  $("#navbar li a.chap2").addClass('active');
         }   else
         {
                  $("#navbar li a").removeClass('active');
              $("#navbar li a.chap3").addClass('active');
         }  
    });
    });
</script>

<div id="navbar">
    <ul>
         <li><h5><a href="#1" class="chap1 active">SERVICE</a> </br> </br></h5></li>
         <li><h5><a href="#2" class="chap2  inactive">LEISTUNGEN</a> </br> </br></h5></li>
         <li><h5><a href="#3" class="chap3 inactive">ÜBER UNS</a> </br> </br></h5></li>
</ul>
</div>

Does however require jQuery, which the OP might not want to use for just one of it's functions, also when the content expands this will not work anymore, as the calculations you make are static rather than focussed on dynamic content. — SidOfc, Mar 22 '14 at 15:28
i just answered for "Navbar Add/Remove class from anchor when scrolling the page". — Von, Mar 22 '14 at 16:18

score 0 · Answer 2 · edited May 23 '17 at 10:28

Here is a solution adapted from Change Active Menu Item on Page Scroll? to your case :

http://jsfiddle.net/sX5Kq/1/

It's much more simple even if it's not completly optimised.

<div id="navbar">
    <ul>
         <li><h5><a href="#1">SERVICE</a></h5></li>
         <li><h5><a href="#2">LEISTUNGEN</a></h5></li>
         <li><h5><a href="#3">ÜBER UNS</a></h5></li>
         <li><h5><a href="#4">PARTNER</a></h5></li>
         <li><h5><a href="#5">KONTAKT</a></h5></li>
    </ul>
</div>

<div id="sections">

    <div class="section" data-id="1">
        <h2>Services</h2>
        <p></p>
    </div>

    <div class="section" data-id="2">
        <h2>LEISTUNGEN</h2>
        <p></p>
    </div>

    <div class="section" data-id="3">
        <h2>Section 3</h2>
        <p></p>
    </div>

    <div class="section" data-id="4">
        <h2>Section 4</h2>
        <p></p>
    </div>

    <div class="section" data-id="5">
        <h2>Section 5</h2>
        <p></p>
    </div>

</div>

CSS

body {
    font-family: Helvetica, Arial;
}

#navbar {
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    width:100px ;
}

#navbar li.active a {
    color:red ;
    font-weight:bold ;
}

#sections {
    margin-left:110px ;
}

JS

function checkActiveSection()
{
    var fromTop = jQuery(window).scrollTop() ;
    jQuery('#sections .section').each(function(){
        var sectionOffset = jQuery(this).offset() ;
        if ( sectionOffset.top <= fromTop )
        {
            jQuery('#navbar li').removeClass('active') ;
            jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;

        }
    }) ;
}

jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
    var idSectionGoto = jQuery(this).closest('li').data('id') ;
    $('html, body').stop().animate({
      scrollTop: jQuery('#sections .section[data-id="'+idSectionGoto+'"]').offset().top
    }, 300,function(){
        checkActiveSection() ;
    });
     e.preventDefault() ;
}) ;

Ok,first, thanks for your further help with this! When I look at http://jsfiddle.net/sX5Kq/1/ it should work like a charme, but it simply doesn't for me. If I understand this all correct, this is jquery, not javascript, which is fine for me. But I need to include the jquery library. After doing so, it doesn't work. My code looks a little different than the above. But it all comes down to simply add or remove the class .active to the active section. That doesn't happen! And I don't know why! I will add a new reply for further code! — user3449855, Mar 25 '14 at 09:59
So, when I use Firebug to add the class "active" manually, then the script removes the class immediately when I start to scroll. So it seems the srtipt is loaded and works, but not the way it should be. Where could possibly be the error? — user3449855, Mar 27 '14 at 19:33

Navbar add remove class from anchor when scrolling the page

2 Answers2