Dynamically Add CSS Class to Fixed DIV when it is scrolled to another HTML element

Question

I read several similar questions here on StackOverflow, alas none of the solutions quite worked for me.

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.

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 fixed 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.

I tried adapting several JavaScript code snippets, but none worked the exact way I want it to. Here is my best try:

 $(function() {
  var menu = $('#fixedbtn');
 $(window).scroll(function() {
   var scroll = $(window).scrollTop();

if (scroll >= $('#footer-1').offset().top) { // check the offset top
  menu.addClass('fixedPosition');
} else { // check the scrollHeight
  menu.removeClass('fixedPosition');
}
 });
});

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.

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 <#footer-1> div comes in view on user's screen bottom.

Could you, fellow code-poets, kindly guide me to the correct solution to achieving the desired results?

Answer 1

Hope this helps

 $(function () { var menu = $('#fixedbtn'); function isInViewport($this) { var elementTop = $this.offset().top; var elementBottom = elementTop + $this.outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); if (elementTop < viewportBottom == true) { menu.addClass('fixedPosition'); } else { menu.removeClass('fixedPosition'); } } $(window).scroll(function () { isInViewport($('#footer-1')) }); });

 .conatiner { height: 2000px; } #footer-1 { background-color: red; position: relative; } #fixedbtn { background-color: blue; width: 55px; height: 20px; position: fixed; left: 0; bottom: 0; } #fixedbtn.fixedPosition { background-color: white; position: absolute; left: 0; top: 0; } .stuck { height: 800px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="conatiner"> <div class="stuck"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div id="footer-1"> <div id="fixedbtn"> fixedbtn </div> #footer-1 </div> </div>