[英]How do I add and remove class while scrolling past an element?
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.我需要将
.fixie
类添加到 div 一旦它滚动超过另一个 div 的开头,并在它滚动超过它的末尾时再次删除。 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?我已经完成了第一部分的工作,正确添加了
.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>
You can check div
position of .limit
with window_top
and if the scroll reaches stop
you can removed sticky
class.您可以使用
window_top
检查.limit
div
位置,如果滚动到达stop
您可以删除sticky
类。 ie : 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.