Change Active Menu Item on Page Scroll?

Question

As you scroll down the page, the active menu item changes. How is this done?

mekwall · Accepted Answer · 2016-02-26T09:08:19.870

226

It's done by binding to the scroll event of the container (usually window).

Quick example:

// Cache selectors
var topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href='#"+id+"']").parent().addClass("active");
});

See the above in action at jsFiddle including scroll animation.

edited Feb 26 '16 at 09:08

answered Apr 02 '12 at 16:23

mekwall

28,614
6
75
77

There are some issues, if we use thi with collapsible divs. If last div is collapsed, then lsat li is always marked as active – Robin C Samuel Nov 05 '13 at 08:38
2

If your menu has a mix of on-page IDs and regular pages, place the on-page ID links first, then change `menuItems = topMenu.find("a"),` to `menuItems = topMenu.find("a").slice(0,4),`, replacing `4` with [your on-page links - 1]. – Stephen Saucier Nov 07 '13 at 00:20
That is, [your on-page links] (not -1). – Stephen Saucier Nov 07 '13 at 01:43
7

I actually used menuItems = topMenu.find('a[href^="#"]'), thus returning only anchor links. Works like a charm. – Julian K Jan 25 '14 at 17:47
Another suggestion, right after declaring the menu selector, enclose the rest of the code in if(topMenu[0]){...}, this will ensure that you're not executing code on something that doesn't exist, which I found was breaking other scripts on my page. – Julian K Jan 26 '14 at 22:54
1

The fiddle is broken. Could you fix it? Thx – m1crdy Oct 16 '14 at 15:39
1

@m1crdy Thanks for the heads up. It's been fixed. Seems like something in jQuery edge broke it. Works fine with 2.1.0 :) – mekwall Oct 17 '14 at 07:28
After some "Uncaught Error: Syntax error, unrecognized expression: [href=#]" errors i found out that the problem was that i was using jquery-2.2.0. Then i changed to jquery-2.1.0 and worked like a charm. Any insight why it doesn't work on 2.2.0? Cheers – Joel Azevedo Feb 17 '16 at 11:07
1

@JoelAzevedo Seems Sizzle have changed. Updated the answer and the test case to work with jQuery 2.2. – mekwall Feb 26 '16 at 09:09
the script broken, if href value use without # – Putra Fajar Hasanuddin Apr 07 '16 at 04:46
Broken with jQuery 3 – DavidDunham Mar 09 '17 at 10:21
nice example. it also scrolls smoothly. – funky-nd Nov 09 '20 at 18:41
What if the sections are in a shuffled order? in case the
comes before section id="#test1">. In that case, this snippet doesn't seem to work – Marcuzio Developuzio Feb 17 '22 at 13:46

MD Ashik · Answer 2 · 2017-07-29T18:40:26.093

Just check my Code and Sniper and demo link :

    // Basice Code keep it 
    $(document).ready(function () {
        $(document).on("scroll", onScroll);

        //smoothscroll
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");

            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');

            var target = this.hash,
                menu = target;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });

// Use Your Class or ID For Selection 

    function onScroll(event){
        var scrollPos = $(document).scrollTop();
        $('#menu-center a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('#menu-center ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

demo live

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.menu {
    width: 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 0 0 0 0;
}
#menu-center ul li a{
  padding: 32px 40px;
}
#menu-center ul li {
    list-style: none;
    margin: 0 0 0 -4px;
    display: inline;

}
.active, #menu-center ul li a:hover  {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
 background-color: rgba(0, 0, 0, 0.12);
 padding: 32px 40px;

}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 72px;
}
#home {
    background-color: #286090;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
#portfolio {
    background: gray; 
    height: 100vh;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100vh;
    width: 100%;
}
#contact {
    background-color: rgb(154, 45, 45);
    height: 100vh;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="container"> --->
   <div class="m1 menu">
   <div id="menu-center">
    <ul>
     <li><a class="active" href="#home">Home</a>

     </li>
     <li><a href="#portfolio">Portfolio</a>

     </li>
     <li><a href="#about">About</a>

     </li>
     <li><a href="#contact">Contact</a>

     </li>
    </ul>
   </div>
   </div>
   <div id="home"></div>
   <div id="portfolio"></div>
   <div id="about"></div>
   <div id="contact"></div>

score 4 · Answer 3 · answered Oct 20 '16 at 13:35

Just to complement @Marcus Ekwall 's answer. Doing like this will get only anchor links. And you aren't going to have problems if you have a mix of anchor links and regular ones.

jQuery(document).ready(function(jQuery) {            
            var topMenu = jQuery("#top-menu"),
                offset = 40,
                topMenuHeight = topMenu.outerHeight()+offset,
                // All list items
                menuItems =  topMenu.find('a[href*="#"]'),
                // Anchors corresponding to menu items
                scrollItems = menuItems.map(function(){
                  var href = jQuery(this).attr("href"),
                  id = href.substring(href.indexOf('#')),
                  item = jQuery(id);
                  //console.log(item)
                  if (item.length) { return item; }
                });

            // so we can get a fancy scroll animation
            menuItems.click(function(e){
              var href = jQuery(this).attr("href"),
                id = href.substring(href.indexOf('#'));
                  offsetTop = href === "#" ? 0 : jQuery(id).offset().top-topMenuHeight+1;
              jQuery('html, body').stop().animate({ 
                  scrollTop: offsetTop
              }, 300);
              e.preventDefault();
            });

            // Bind to scroll
            jQuery(window).scroll(function(){
               // Get container scroll position
               var fromTop = jQuery(this).scrollTop()+topMenuHeight;

               // Get id of current scroll item
               var cur = scrollItems.map(function(){
                 if (jQuery(this).offset().top < fromTop)
                   return this;
               });

               // Get the id of the current element
               cur = cur[cur.length-1];
               var id = cur && cur.length ? cur[0].id : "";               

               menuItems.parent().removeClass("active");
               if(id){
                    menuItems.parent().end().filter("[href*='#"+id+"']").parent().addClass("active");
               }

            })
        })

Basically i replaced

menuItems = topMenu.find("a"),

by

menuItems =  topMenu.find('a[href*="#"]'),

To match all links with anchor somewhere, and changed all that what was necessary to make it work with this

See it in action on jsfiddle

How do I extend this for a vertical menu specially when the menu is larger than the page? https://pyze.com/product/docs/index.html When a user scrolls on content on right, I would like to activate appropriate menu on left and scroll the menu if needed to show active menu. Any pointers are appreciated. — Dickey Singh, Feb 27 '17 at 07:35
This is very god, thank you. However, I would change the attribute selector from *= to ^=. If you use *= then you would catch also things like https://google.com/#something even though this is an external link. Attribute selector are well explained here: https://www.w3schools.com/css/css_attribute_selectors.asp — Jacques, Jul 03 '17 at 13:22

score 1 · Answer 4 · answered Jun 01 '20 at 17:00

1

If you want the accepted answer to work in JQuery 3 change the code like this:

var scrollItems = menuItems.map(function () {
    var id = $(this).attr("href");
    try {
        var item = $(id);
      if (item.length) {
        return item;
      }
    } catch {}
  });

I also added a try-catch to prevent javascript from crashing if there is no element by that id. Feel free to improve it even more ;)

answered Jun 01 '20 at 17:00

Tim Gerhard

3,477
2
19
40

This still doesn't work for me. It returns an error "Uncaught SyntaxError: Unexpected token 'var'" – David Apr 11 '21 at 23:24

Change Active Menu Item on Page Scroll?

4 Answers4

Linked

Related