title: Dynamically Add CSS Class to Fixed DIV when it is scrolled to another HTML element
body: <p>I read several similar questions here on StackOverflow, alas none of the solutions quite worked for me. </p>
  
  <p>I want to dynamically add a css class to html element when it is scrolled down the page past another html element and remove the class when the user scrolls back up the page. </p>
  
  <p>Specifically, I want to change position:fixed of a DIV element to position:absolute when it reaches the top of the footer div, so that effectively the DIV element stops being <em>fixed</em> to the bottom of the screen and sticks at the top of the footer div, so that it remains there, while the user continues to scroll down the rest of the page. </p>
  
  <p>I tried adapting several JavaScript code snippets, but none worked the exact way I want it to. Here is my best try: </p>
  
  <pre><code> $(function() {
    var menu = $('#fixedbtn');
   $(window).scroll(function() {
     var scroll = $(window).scrollTop();
  
  if (scroll &gt;= $('#footer-1').offset().top) { // check the offset top
    menu.addClass('fixedPosition');
  } else { // check the scrollHeight
    menu.removeClass('fixedPosition');
  }
   });
  });
  </code></pre>
  
  <p>I want to add the class "fixedPosition" to the #fixedbtn div when it is scrolled past the top of the #footer-1 div, and also remove the class, when the user scrolls back up, so that #footer-1 sinks back off the viewport bottom. </p>
  
  <p>Using fixed pixel distances from page top does not work for me in this case. I want the event trigger that will add the class to the div to fire when the top of the &lt;#footer-1> div comes in view on user's screen bottom. </p>
  
  <p>Could you, fellow code-poets, kindly guide me to the correct solution to achieving the desired results? </p>