如何在滾動元素時添加和刪除類？

Question

我需要將.fixie類添加到 div 一旦它滾動超過另一個 div 的開頭，並在它滾動超過它的末尾時再次刪除。 我已經完成了第一部分的工作，正確添加了.fixie ，但是一旦我滾動過元素，如何再次刪除該類？

 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

您可以使用window_top檢查.limit div位置，如果滾動到達stop您可以刪除sticky類。 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>