How do I add and remove class while scrolling past an element?

Question

I need the .fixie class to be added to a div once it scrolls past the start of another div, and removed again once it scrolls past the end of it. I've got the first part working, .fixie is added correctly, but how do I remove the class again once I've scrolled past the element?

 function sticky_relocate_2() { var window_top = $(window).scrollTop(); var div_top = $('.r_box').offset().top - 100; console.log(window_top,div_top); if (window_top > div_top) { $('.fixie').addClass('sticky') } else $('.fixie').removeClass('sticky') } $(window).scroll(sticky_relocate_2);

 .wrap{ height:2000px; width:100%; } .fixed_line{ border-bottom:1px solid #000; height:100px; width:100%; margin-bottom:100px; background-color:#72cbeb; position:fixed; } .container{ padding-top:200px; } .left{ float:left; } .l_box{ width:200px; background-color:#CCC; } .r_box, .fixie{ width:100px; background-color:#999; } .sticky{ position:fixed; top:100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='wrap'> <div class='fixed_line'></div> <div class='container'> <div class='left l_box'>left side</div> <div class='left r_box'> <div class='fixie'>I'm Fixed at some point</div> </div> <div style='clear:both;'></div> </div> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> <div class="limit"> stop </div> </div>

Answer 1

You can check div position of .limit with window_top and if the scroll reaches stop you can removed sticky class. ie :

 function sticky_relocate_2() { var window_top = $(window).scrollTop(); var div_top = $('.r_box').offset().top - 100; if (window_top > div_top) { $('.fixie').addClass('sticky') } //if window top reaches the limit removed class if(window_top > $('.limit').position().top){ $('.fixie').removeClass('sticky'); } } $(window).scroll(sticky_relocate_2);

 .wrap{ height:2000px; width:100%; } .fixed_line{ border-bottom:1px solid #000; height:100px; width:100%; margin-bottom:100px; background-color:#72cbeb; position:fixed; } .container{ padding-top:200px; } .left{ float:left; } .l_box{ width:200px; background-color:#CCC; } .r_box, .fixie{ width:100px; background-color:#999; } .sticky{ position:fixed; top:100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='wrap'> <div class='fixed_line'></div> <div class='container'> <div class='left l_box'>left side</div> <div class='left r_box'> <div class='fixie'>I'm Fixed at some point</div> </div> <div style='clear:both;'></div> </div> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> pr <br> <div class="limit"> stop </div> </div>