CODEWITHSUNDEEP
javascriptjquery
Вадим Курганский
Вадим Курганский

Reputation: 1

dynamic change class in section, jquery

Document is ready. When scrolling the page is dynamic assigned class "visible" in "cd-section"

I need when id="container-3" assigned a class "visible" - container id="site" getting class .dark

My script does not work with dynamic change of the container class

<div id="site">
  <section class="itemListPrimary   cd-section visible" >1</section>
  <section class="itemListSecondary cd-section" id="container-0"></section>
  <section class="itemListSecondary cd-section" id="container-1"></section>
  <section class="itemListSecondary cd-section" id="container-2"></section>
  <section class="itemListSecondary cd-section" id="container-3"></section>
</div>
<script>
jQuery(document).ready(function(){
  if ( jQuery('#container-03').hasClass('visible')) {
   jQuery('#site').addClass('dark');
  } else {
    jQuery('#site').removeClass('dark');
  }
});
</script>

Upvotes: 0

Views: 184

Answers (2)

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Probably you're looking for something like this?

 jQuery(window).scroll(function(){
        if(jQuery(".itemListSecondary.cd-section").hasClass("active")){
         jQuery("#site").toggleClass("dark");
        }
    });

Upvotes: 0

mylee
mylee

Reputation: 1333

If the class changes when scrolling then probably you should use scroll() event to check every time the user scroll if the class active is assigned to the section then toggle class dark :

jQuery(window).scroll(function(){
  if ( jQuery('#container-3').hasClass('active')) {
       jQuery('#site').addClass('dark');
  } else {
       jQuery('#site').removeClass('dark');
  }
});

Upvotes: 2

Related Questions