Adding and removing classes at different heights on page using jQuery

Question

I want to remove/add classes when the user is at different distances from the top by using jQuery.

I have successfully done it, and it works fine, but I think I'm doing it wrong, and I would like your help to optimize the code.

The html is simple, basically the sections(including the header), have 100% width. and different colors. I want to make the header change color when its over the first section(for aesthetical purposes). And I also want it to have a shadow when the page has been scrolled more than 1 pixel.

I'm doing it by adding/removing classes.

When I use one big else if statement it doesn't work well because whenever any any condition is matched js stops checking for other matches, so it doesn't apply all the classes needed.

The next code works, however as I said, I think that it's not optimal/bad written. Here is the HTML markup:

<header class="dark no-shadow">
  Header
</header>
<section class="blue">
  Please Scroll Down to see the header changes...
</section>
<section>
  The header color Should change when you pass through me.
</section>

And here is the jQuery code:

var header = $('header'),
        blueSection = $('section.blue'),
    // Calculate when to change the color.
        offset = blueSection.offset().top + blueSection.height() - header.height();

$(window).scroll(function(){
  var scroll = $(window).scrollTop();

    // Remove Class "dark" after scrolling over the dark section
  if (scroll >= offset) {
    header.removeClass('dark');
  } else {
    header.addClass('dark');
  }

    // Remove Class "no-shadows" whenever not on the top of the page.
  if (scroll >= 1) {
    header.removeClass('no-shadow');
  } else {
    header.addClass('no-shadow');
  }

});

And for those of you who like to use jsfiddle(like me!): https://jsfiddle.net/shock/wztdt077/6/

Thanks ahead guys!

Answer 1

Here is what I've come up with:

var header = $('header'),
  blueSection = $('section.blue'),
  // Calculate when to change the color.
  offset = blueSection.offset().top + blueSection.height() - header.height();

var add = function(obj, cls) {obj.addClass(cls);}
var remove = function(obj, cls) {obj.removeClass(cls);}

var stylePoints = [offset, 1,           100,    200];
var styleTo =     ['dark', 'no-shadow', 'blue', 'tall'];
var styleType =   [add,    add,         remove, remove];

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  for (i = 0; i < stylePoints.length; i++) {
    var func = styleType[i];
    if (scroll >= stylePoints[i])
      (styleType[i] == add) ? remove(header, styleTo[i]) : add(header, styleTo[i]);
    else func(header, styleTo[i]);
  }
});

It's not that much longer than your current jQuery, and allows for (theoretically) an infinite number of style changes without having to add a million long if/else statements. To add a new style change, you have to add a value to the end of each of the three arrays. stylePoints specifies the scrollTop() value at which a style should either be added or removed. styleTo specifies the class to be added or removed. styleType specifies whether this class should be added or removed when the user is scrolled above the corresponding stylePoints value. The opposite will occur when the user is scrolled below or at the corresponding stylePoints value. For instance, you can see from the code that the tall class will be removed from the header when the user is scrolled above 200, and added when the user is scrolled below or at 200.