CODEWITHSUNDEEP
javascriptjquerycss
SShine2
SShine2

Reputation: 65

How to keep class active when scrolling with javascript?

I need help figuring out what is going on with my javascript. I have some code that is supposed to make the nav links have an active class when you are on that part of the page, but it's only sort of working for a couple links and it also flickers as you scroll rather than staying active the whole time you're on that part of the page. See the JSFiddle for an example https://jsfiddle.net/7szpuqsr/ -- if you scroll slowly you can see how "home" becomes active for a moment. I am trying to get each link to have the active class when you click it and also while you are on that entire part of the page.

I also have a javascript sticky nav bar and smooth scrolling working so I don't know if possibly any of that is getting in the way? Thanks in advance for help.

Here's the Javascript I'm trying to use for the active class:

var sections = $('section')
 , nav = $('nav')
 , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
 var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top - nav_height,
    bottom = top + $(this).outerHeight();

  if (cur_pos >= top && cur_pos <= bottom) {
   nav.find('a').removeClass('active');
   sections.removeClass('active');

  $(this).addClass('active');
   nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
     }
   });
 });

nav.find('a').on('click', function () {
 var $el = $(this)
 , id = $el.attr('href');

$('html, body').animate({
  scrollTop: $(id).offset().top - nav_height
   }, 500);

  return false;
 });

Upvotes: 0

Views: 1124

Answers (1)

Huangism
Huangism

Reputation: 16438

Something like this? I couldn't reproduce the flickering visually on my machine but I can see the class being removed/added constantly on scroll

https://jsfiddle.net/7szpuqsr/1/

Main changes, I added a class to your sections, you have too many sections but with the way your code is meant to work, it's much easier to add a class to the sections, example below

<section id="home" class="section">

var sections = $('.section') to get the section class

updated this part of the js to check for active class

if (cur_pos >= top && cur_pos <= bottom) {
  if(!$(this).hasClass("active")) {
    nav.find('a').removeClass('active');
    sections.removeClass('active');

    $(this).addClass('active');
    nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
  }
}

You can also cache the $(this) into a variable inside of the section loop like

var $this = $(this);

then just use $this for the rest of the loop

here is the doc for hasClass https://api.jquery.com/hasclass/

Upvotes: 1

Related Questions