Adding and removing classes at different heights on page using jQuery
I know you tagged this jQuery, but I believe that loading in jQuery for this seems like a lot of processing for little benefit, so I decided to write it in a more universal approach, which I think is the main problem with your code.

What you want to accomplish is to have a little script that can be included and will work predictably in as many circumstances without being to specific, so first I went about actually creating a structure:


The element the class will be applied to will have an attribute named data-scroll-group - it will define the group name for these scrollable items.
The elements that your header will respond to will contain an attribute constructed of the above group name and prefixed by data. It's contents will be the classname(s) you want to apply.


This structure looks like this:

&lt;header data-scroll-group="header-group"&gt;&lt;/header&gt;
&lt;section data-header-group="aClassName"&gt;&lt;/section&gt;


This means you could have many scroll groups on the page, allowing you to reuse the code with different aspect and different headers, different responders, etc... It makes your code less connected to the DOM and more based in a structure.

The rest is pretty simple. Use getBoundingClientRect to get the elements position compared to the viewport. I am currently applying the classes using the position of the viewport, but you could simply get the same getBoundingClientRect on the header and add the values together to get a result for your header specifically.

Check out the snippet and tell me if you have any questions about it. You could replace my header.className with jQuery if you wanted - you could replace most of it with jQuery, but I think coupling your code to jQuery has no benefit here, as you want this to work anywhere, and pure vanilla Javascript is about as long.



// This is a handy wrapper function that will return an array of matching element instead of a nodeList
function querySelectorArray(query, root){
  return Array.prototype.slice.call((root || document).querySelectorAll(query));
}

// Get all headers that are designated 'scroll-group'
var headers = querySelectorArray('[data-scroll-group]');

// Loop through the headers
headers.forEach(function(header){
  // Get the name of the group from the headers [data-scroll-group] attribute
  var group = header.getAttribute('data-scroll-group');
  // Get all the sections with a matching data-[data-scroll-group] attribute
  var sections = querySelectorArray('[data-' + group + ']');
  // Create an Event Listener for scrolling
  window.addEventListener('scroll', function(){
    // Declare a lastSection variable that can store the last class that scrolled by
    var lastSection = false;
    sections.forEach(function(section){
      // Get the elements position compared to the viewport
      var offset = section.getBoundingClientRect();
      // If the position is smaller than 0 it has scrolled further than that section
      // The same is true for the scroll being smaller than the negative height - if so, it is out of view.
      if(offset.top &lt; 0 &amp;&amp; offset.top &gt; -offset.height) lastSection = section.getAttribute('data-' + group + '');
    });
    // Apply the class to your header
    header.className = lastSection || ''; 
  })
});
body {
  padding: 0;
  margin: 0;
  padding-top: 20px;
  height: 405vh;
  font-family: Arial, serif;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #dd0300;
  -webkit-transition: all 1s;
  transition: all 1s;
  color: #fff;
  padding: 5px 20px;
  box-sizing: border-box;
}
header.blue {
  background: #4e88ff;
}
header.shadow {
  box-shadow: 0 0 20px #000;
}
section {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background: #ccc;
  padding: 20px;
}
&lt;header data-scroll-group="header-group"&gt;
  Header
&lt;/header&gt;
&lt;section data-header-group="blue"&gt;
  Scroll Down (header will become blue)
&lt;/section&gt;
&lt;section data-header-group="shadow"&gt;
  Scroll Down (header will have a shadow, no longer blue)
&lt;/section&gt;
&lt;section data-header-group="blue shadow"&gt;
  Scroll Down (header will have a shadow and be blue)
&lt;/section&gt;
&lt;section&gt;
  Scroll Down (header will reset)
&lt;/section&gt;