How to add some CSS Class through jQuery on scrolling the page

Question

I created this pen at CodePen.io , the page scrolls smoothly to different sections on clicking any item in the nav (navigation)

Here is the jQuery code.

// Smooth Scroll on clicking navigation items
$('nav a').click(function() {
  var $href = $(this).attr('href');
  $('body').stop().animate({scrollTop: $($href).offset().top}, 1000);

  // add class "active" to nav items on click
  $('nav a').removeClass('active');
  $(this).addClass('active');
  return false;
});

I have already added the class "active" when someone clicks on any of the links inside the nav, but how to add class active when someone scrolls to that section using the scroll bar not by clicking on the link ?

Look at the pen here

Your suggestions will be appreciated, Thank you in advance !

Bro @avall I already read .scroll() at jQuery.com and if you look at the pen, I already used it to achieve the parallax background effect, but don't know how to implement to achieve what I want as explained above. — Bangash, Sep 24 '14 at 21:17
This was already answered [here](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) — Schroed, Sep 24 '14 at 21:18

score 1 · Answer 1 · answered Sep 24 '14 at 21:17

1

You can look up at this fiddle

You have to use the Event scroll

$(document).on("scroll", function(){ ... });

and then calculate difference on top position.

answered Sep 24 '14 at 21:17

Allan Raquin

583
7
26

This solution worked, I actually modified it a bit because it was blinking when i used the code form that fiddle. – Bangash Sep 24 '14 at 21:44

score 1 · Answer 2 · answered Sep 24 '14 at 21:22

Add this to your $(window).scroll() function

$(".active").toggleClass("active");
   if ( $(window).scrollTop() < $("#portion2").offset().top-100){ //maybe you want to tweak this value
    $( $("nav a")[0]).toggleClass("active");
   }
  else if ( $(window).scrollTop() < $("#portion3").offset().top-100){
    $( $("nav a")[1]).toggleClass("active");
   }
  else if ( $(window).scrollTop() < $("#portion4").offset().top-100){
    $( $("nav a")[2]).toggleClass("active");
   }
  else{    
    $( $("nav a")[3]).toggleClass("active");    
  }
})

and then remove

$('nav a').removeClass('active');
$(this).addClass('active');

from your $('nav a').click()

This also adds a really cool changing through all sections while clicking on 4 when viewing 1.

Check it out here: http://codepen.io/anon/pen/dFkEG

let me try this also, actually I modified it and it worked, but may be your solution is better. — Bangash, Sep 24 '14 at 21:42

score 0 · Answer 3 · answered Aug 12 '15 at 17:55

It is fairly simple to add css to an element in correspondence to your scroll position by using jQuery. Same concept can be applied to add class to an element using the scroll value. Here is a sample code:

$(window).scroll(function(){ var wScroll = $(this).scrollTop(); //This stores your scroll value from top if (wScroll > $('#portion1').offset().top){ $('#portion1').addClass('active'); } });

The above code will add the class active to the element having the class portion1 when it is at the top of your browser window. If you want it to add the class active as soon as it enters the browser window, then use this code:

if (wScroll > $('#portion1').offset().top - ($(window).height())){ $('#portion1').addClass('active'); }

How to add some CSS Class through jQuery on scrolling the page

3 Answers3