显示一个div到达另一个

Question

我有一个网站，我想淡入并淡出内容div一旦我到达该部分。

请参阅示例：

＆＃13;

＆＃13;

body{
  height: 1000px;
}
nav{
  position: fixed;
}
.content{
  height: 100px;
  width: 100px;
  background: orange;
  display: block;
  margin: auto;
}
section{
  height: 200px;
  width:400p;
}
#s1{
  background: red;
}
#s2{
  background: blue;
}
#s3{
  background: green;
}

＆＃13;

<div id="wrapper">
  <nav>
    <ul>
      <li><a href="#s1"><p>Section One</p></a></li>
      <li><a href="#s2"><p>Section Two</p></a></li>
      <li><a href="#s3"><p>Section Three</p></a></li>
    </ul>
  </nav>
  <section id="s1"  data-index="0">
    <div class="content">	
    </div>
  </section>
  <section id="s2" data-index="1">
    <div class="content">	
    </div>
  </section>
  <section id="s3" data-index="2">
    <div class="content">	
    </div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

我想在单击锚点或滚动到各个部分时运行此代码。