javascript - jQuery: Why can't my script remove the class? -
jquery won't remove class after scrolling
this script:
$(window).scroll(function(){ if($(window).scrolltop() >= $("#white").offset().top -70) { $('.burger-menu').addclass('white'); } else { $('.burger-menu').removeclass('white'); } }); $(window).scroll(function(){ if($(window).scrolltop() >= $("#color-main").offset().top -70) { $('.burger-menu').addclass('color-main'); } else { $('.burger-menu').removeclass('color-main'); } }); $(window).scroll(function(){ if($(window).scrolltop() >= $("#yellow").offset().top -70) { $('.burger-menu').addclass('yellow'); } else { $('.burger-menu').removeclass('yellow'); } }); this html:
<section class="home-page" id="white">blablabla</section> <section class="wrap" id="color-main">blablabla</section> <section class="wrap" id="yellow">blablabla</section> but <div>
<div class="burger-menu white color-main yellow"> still has classes "white" , "color-main", should removed. :(
i made codepen see it.
there 2 fixes recommed try:
- don't multiple
.scroll(function(){...})calls, overwrite each other. - use
$("body").scroll(function(){...}), because that's element (usally) scroll in
Comments
Post a Comment