使用jQuery在基于另一个类的另一个div中添加一个类

Question

I am trying to remove a div class when another div has the class 'scroll-to-fixed-fixed' using jQuery. The scroll function works fine and the sticky header appears as desired. but its the condition that doesn't seem to work. I have tried the following code but no luck. Kindly assist: :

 $(window).scroll(function() { var scroll = $(window).scrollTop(); var y = $(this).scrollTop(); if (y > 10) { //clearHeader, not clearheader - caps H $(".scroll-nav-holder").addClass("scroll-to-fixed-fixed"); } else { $(".scroll-nav-holder").removeClass("scroll-to-fixed-fixed"); } }); if ($('.scroll-nav-holder').hasClass('scroll-to-fixed-fixed')) { $(".logo-holder").removeClass('nodisplay'); } else { $(".logo-holder").addClass('nodisplay'); } 

 .logo-holder { height: 100px; background: red; } .nodisplay { display: none; } .scroll-nav-holder { height: 20px; background: blue; } .container { height: 200px; background: green; } .scroll-to-fixed-fixed { position: fixed; top: 0px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="logo-holder nodisplay">something here</div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="scroll-nav-holder"> somethin more here </div> 

Answer 1

As mentioned above you should include you .logo-header condition inside scroll event. Also, I slightly refactored your code using toggleClass function to make it a bit cleaner:

 $(window).scroll(function() { var scroll = $(window).scrollTop(); // ? const toggleCondition = $(this).scrollTop() > 10; $(".scroll-nav-holder").toggleClass('scroll-to-fixed-fixed', toggleCondition); $(".logo-holder").toggleClass('nodisplay', toggleCondition); }); 

 .logo-holder { height: 100px; background: red; } .nodisplay { display: none; } .scroll-nav-holder { height: 20px; background: blue; } .container { height: 200px; background: green; } .scroll-to-fixed-fixed { position: fixed; top: 0px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="logo-holder nodisplay">something here</div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="container"> More stuff </div> <div class="scroll-nav-holder"> somethin more here </div> 

Answer 2

Just put it inside the if else statements where your also change the class of the "scroll-nav-holder" like so:

 $(window).scroll(function() { var scroll = $(window).scrollTop(); var y = $(this).scrollTop(); if (y > 10) { //clearHeader, not clearheader - caps H $(".scroll-nav-holder").addClass("scroll-to-fixed-fixed"); $(".logo-holder").removeClass('nodisplay'); } else { $(".scroll-nav-holder").removeClass("scroll-to-fixed-fixed"); $(".logo-holder").addClass('nodisplay'); } });