jqueryで動的に追加されたクラスを選択するにはどうすればよいですか？

Question

jQueryを使用して.content-singleへのスクロールでクラスをアクティブにしました。また、アクティブなクラスが動的に追加される基本クラスに＃wi​​th-scrollに異なるクラスを追加したいとします。ここで

は私のHTML

<div id="with-scroll" class="single with-scroll"> 
      <div class="row"> 
      <div class="outer-navigator"><a href="#" class="tl-navigator three">3</a></div> 
      <div class="col s12 center-align third-title"> 
      <h2>Lorem ipsum dolor sit amet</h2> 
      </div> 
      <div class="col m6 s6"> 
       <div class="text-content"> 
       <h3>Lorem ipsum,<br> 
        in real time.</h3> 
        <div id="content-single-one" class="content-single"> 
        <a href="#scroll1"></a> 
         <i class="material-icons">supervisor_account</i> 
         <h4 id="scroll1" class="section scrollspy">Lorem ipsum dolor sit amet</h4> 
         <p>Lorem ipsum, your workers, your team and 
         companies perform side by side - in real-time.</p> 
        </div> 

        <div id="content-single-two" class="content-single"> 
        <a href="#scroll2"></a> 
        <i class="material-icons">av_timer</i> 
         <h4 id="scroll2" class="section scrollspy">Lorem ipsum</h4> 
         <p>Lorem ipsum with the help of screenshotting,<br> 
         screen recording orem ipsum monitoring.<br> 
         Know exactly what was done and when. 
         </p> 
        </div> 

        <div id="content-single-three" class="content-single"> 
        <a href="#scroll3"></a> 
        <i class="material-icons">group_work</i> 
         <h4 id="scroll3" class="section scrollspy">Lorem ipsum</h4> 
         <p>Lorem ipsum, your worers, team and compa nies <br> 
         perform side-by-side - in real-time. <br> 
         Iden tify bottlenecksand getan eagle-eye view <br> 
         of your business. </p> 
        </div> 
       </div> 
      </div> 
      <div class="col m6 s6" id="screen-sticky"> 
      <div class="screen"> 
       <img src="images/macbook.png"> 
        <div class="inner one"> 
        <img src="images/screen-1.png"> 
        </div> 
        <div class="inner two"> 
        <img src="images/screen-2.png"> 
        </div> 
        <div class="inner three"> 
        <img src="images/screen-3.png"> 
        </div> 
       </div> 
      </div> 
      </div> 
     </div> 

であり、ここでjQueryが、私は

$(function() { 
    $("#content-single-one.active").each(function(){ 
    $("#with-scroll").addClass("one"); 
    }); 
    $("#content-single-two.active").each(function(){ 
    $("#with-scroll").addClass("two"); 
    }); 
    $("#content-single-three.active").each(function(){ 
    $("#with-scroll").addClass("three"); 
    }); 
}); 

Answer 1

$(document).scroll(function(){ 
    if($("#content-single-one").hasClass('active')){ 
     $("#with-scroll").addClass("one"); 
    }else if($("#content-single-two").hasClass('active')){ 
     $("#with-scroll").addClass("two"); 
    }else if($("#content-single-three").hasClass('active')){ 
     $("#with-scroll").addClass("three"); 
    } 
})