Breaking News: Grepper is joining You.com. Read the official announcement!

change active menu item on page scroll javascript

Fancy Fly answered on February 4, 2022 Popularity 7/10 Helpfulness 1/10

answer change active menu item on page scroll javascript

change active menu item on page scroll javascript

Comment

// 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");
});

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript menu scroll

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

Fancy Fly

0 Answers Avg Quality 2/10

change active menu item on page scroll javascript

Contents

More Related Answers

change active menu item on page scroll javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.