Change CSS when #section is reached

Please help me :

I want to rotate icon (class="user-icon") with CSS if #section2 is reached when scrolling.

Thank you !

    <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>
  <!--SECTION BACKGROUND IMAGES ARE SET IN CSS IN /CSS/STYLES.CSS-->
  <li id="section-2" class="cover" style="background-color:#e74c3c">
    <section class="center-block">
      <div class="wrapper clearfix"> 
        <span class="user-icon></span>
      </div>
    </section>
  </li>       
</ol>