Change the active navigation class when scrolling a window

Question

I want to create a scroll effect, for example here http://www.strikingly.com/s/pages/default-ion?demo=ion#1 All I need at this moment is to change the li-navigation class that is active when scroll the window, just change it using the <a href='#about'> hash target

http://jsfiddle.net/Dxtyu/131/

Answer 1

Demo

Serlite code is very good, but has some bugs.

• If you scroll to the end, the last two elements of a have an active class, so both are highlighted.

Decision

added $('#menu-center ul li a').removeClass("active"); to remove all previous active classes before adding a new class to the code below.

 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"); //added to remove active class from all a elements currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); } 

2. If you click on a link to a link of a 2nd or higher level, you will go to the location, but change the active class to the previous link.

Decision

 $('html, body').stop().animate({ 'scrollTop': $target.offset().top+2 

Answer 2

Well ... not sure if you are still looking for an answer to your question, but I can make a suggestion ...

As already mentioned, you can use the scrollTop() method to determine which section is in the viewport. Here is a quick function that I put together to determine this, it cannot be optimized (I'm not a jQuery expert, sorry), but it seems to work and should at least put you on the right path to the solution:

 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) { currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); } 

This function basically takes the href each menu binding element and uses it to search for a <div> (or any other element if you want) with the corresponding identifier in the document. After that, it checks whether the top of this <div> above or at the current scroll position, and its bottom is still below the current scroll position. (These two conditions are true, meaning that this <div> is the highest in the viewport, so it should be considered as the active section.) Then the .active class is deleted / added. Of course, you can simply add / subtract values ​​if you want to compensate when the section is considered “active”.

It may be easier to just show what it does, so here's an updated JSFiddle with this feature. It is bound at first with $(document).on("scroll") - however, note that I also disabled it from the scroll event with $(document).off("scroll") while the scrolling is smooth, so the section does not change until you reach the destination section (if you click on one of the menu links). After performing a smooth scroll, I will bind the function to the scroll event again.

Anyway, I hope this is what you were looking for! If this is not the case, let me know and I will be happy to help further. (Or I'll try, at least, because, as I mentioned, jQuery is actually not my specialty ...) Good luck!

Answer 3

I know I'm late, but my answer can help new viewers on this topic. Tushar Gupta's answer is correct. But if there is a link in the menu that redirects to any other page. Tushar Gupta Answers an error. For example

  <div class="m1 menu"> <div id="menu-center"> <ul> <li><a href="#home">Home</a> </li> <li><a href="#portfolio">Portfolio</a> </li> <li><a href="#about">About</a> </li> <li><a href="http://mywebsite.com/blog">Blog</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> 

This will cause a console error, such as this . And scrolling will not work for contact. I updated the Tushar code to fix this problem.

 function onScroll(event){ var scrollPos = $(document).scrollTop(); $('#menu-center a[href*=#]:not([href=#])').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"); //added to remove active class from all a elements currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); } 

Answer 4

Use $(this).scrollTop(); in your event listener to check which section is in the viewport.

Answer 5

hiccup in IE9, so I fixed

 $(document).ready(function () { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').click(function(){ var target = $(this).attr('href'); $('html, body').animate({scrollTop: $(target).offset().top-48}, 500); return false; $("#menu a").click(function () { $("#menu a").removeClass('active'); }) $(this).addClass('active'); var target = this.hash, menu = target; $target = $(target); $('html, body').stop().animate({ 'scrollTop': $(target).offset().top-50}, 500, 'swing', function () { window.location.hash = target; $(document).on("scroll", onScroll); }); }); }); function onScroll(event){ var scrollPos = $(document).scrollTop(); j$('#menu a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top-70 <= scrollPos && refElement.position().top-50 + refElement.height() > scrollPos) { $('#menu ul li a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); }