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
– Bangash, Commented Sep 24, 2014 at 21:17

Allan Raquin · Accepted Answer · 2014-09-24 21:17:30Z

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, 2014 at 21:17

Allan Raquin

6339 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bangash Over a year ago

This solution worked, I actually modified it a bit because it was blinking when i used the code form that fiddle.

Johan Karlsson · Accepted Answer · 2014-09-24 21:22:03Z

1

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

answered Sep 24, 2014 at 21:22

Johan Karlsson

6,4761 gold badge22 silver badges28 bronze badges

1 Comment

Bangash Over a year ago

let me try this also, actually I modified it and it worked, but may be your solution is better.

Mohit Yadav · Accepted Answer · 2015-08-12 17:55:13Z

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'); }

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related