Change CSS when id is reached

I want to change the CSS class of class="Name1" when id"section-2" is reached.and also change CSS of class="Name2" if id "section-3" is reached.

This code only works for one section.

CSS

.Name1 {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}
.Name2 {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}
.rotate {
     -moz-transform:rotate(360deg);
     -webkit-transform:rotate(360deg);
     transform:rotate(360deg);
}

JS

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop(); 
    $('.Name1').toggleClass('rotate',
        scroll >= $('#section-2').offset().top
    ); 
}); 
$(window).scroll(); 

HTML

<ol class="curtains"> 
  <li id="section-1" class="cover" ">
    <section class="center-block">
      <div class="wrapper clearfix">
        <div class="col1-1 centered">

        </div>
      </div>
    </section>
  </li> 
  <li id="section-2" class="cover" style="background-color:#e74c3c">
    <section class="center-block">
      <div class="wrapper clearfix">
        <div class="col1-2"> 
            <h4 class="Name1">Name1</h4>
        </div>  
      </div>
    </section>
  </li> 
  <li id="section-3" class="cover" style="background-color:#16a085">
    <section class="center-block">
      <div class="wrapper clearfix">  
        <div class="col1-2"> 
            <h4 class="Name2">Name 2</h4>
          </div>
      </div>
    </section>
  </li>
</ol> 

and if i want to test to both 2 sections it doesn't work with this code.

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop(); 
    $('.Name1').toggleClass('rotate', 
        scroll >= $('#section-2').offset().top
    ); 
    $('.Name2').toggleClass('rotate', 
        scroll >= $('#section-3').offset().top
    ); 
}); 
$(window).scroll();