在长滚动页面上将一个部分淡入另一个部分

Question

我有一个分为几个部分的页面，其中一些部分使用jQuery插件（Sticky-it）粘贴到浏览器，直到下面的部分向上滚动。

向下滚动我想要的每个部分都会淡入另一部分。

HTML

    <section id="one">
      <div class="container">
        <header>
          <h1 class="s-heading">First Section Heading</h1>
        </header>
        <article>
          <p>Vegan yr tacos everyday carry, street art banjo cardigan four dollar toast franzen poutine wolf celiac portland keytar lo-fi. Williamsburg locavore blue bottle man bun XOXO, helvetica edison bulb.</p>
        </article>
      </div> <!-- .container -->
    </section> <!-- .section -->


    <section id="two">
      <div class="outer">
        <div class="inner sticky-content">
          <div class="container">
            <div>
             </div> <!-- .container -->
            </div> <!-- .inner -->
          </div> <!-- .outer -->
    </section> <!-- .section -->


    <section id="three">
      <div class="container">
        <header>
          <h1 class="s-heading">Third Section Heading</h1>
        </header>
        <article>
          <p>Mlkshk 3 wolf moon slow-carb, dreamcatcher schlitz yr chia edison bulb butcher forage yuccie four loko thundercats glossier street art. Migas tumblr knausgaard glossier leggings biodiesel. Pinterest intelligentsia chillwave, glossier cronut
                  pug poke microdosing bushwick ennui. Chicharrones +1 subway tile, fap franzen edison bulb truffaut iPhone quinoa chambray meditation food truck leggings tumeric fashion axe. Etsy bespoke tattooed, cronut aesthetic flannel microdosing iceland
                  wayfarers selfies pour-over. Pabst bushwick skateboard waistcoat migas, pork belly flexitarian asymmetrical echo park retro master cleanse XOXO viral lomo wolf. Kogi bicycle rights mumblecore mlkshk succulents, post-ironic beard ennui live-edge
                  man bun etsy.
          </p>
        </article>
      </div> <!-- .container -->
    </section> <!-- .section -->

    <section id="four">
      <div class="container">
        <header>
          <h1 class="s-heading">Fourth Section Heading</h1>
        </header>
        <article>
          <p>Small batch butcher hot chicken, literally gochujang cray organic copper mug venmo disrupt subway tile bushwick lyft. </p>
        </article>
      </div>
      <!-- .container -->
    </section>
    <!-- .section -->


    <section id="five">
      <div class="outer">
        <div class="inner sticky-content">
          <div class="container">
            <div>
             </div> <!-- .container -->
            </div> <!-- .inner -->
          </div> <!-- .outer -->
    </section> <!-- .section -->


    <section id="six">
      <div class="container">
        <header>
          <h1 class="s-heading">Third Section Heading</h1>
        </header>
        <article>
          <p>Mlkshk 3 wolf moon slow-carb, dreamcatcher schlitz yr chia edison bulb butcher forage yuccie four loko thundercats glossier street art. Migas tumblr knausgaard glossier leggings biodiesel. Pinterest intelligentsia chillwave, glossier cronut
                  pug poke microdosing bushwick ennui. Chicharrones +1 subway tile, fap franzen edison bulb truffaut iPhone quinoa chambray meditation food truck leggings tumeric fashion axe. Etsy bespoke tattooed, cronut aesthetic flannel microdosing iceland
                  wayfarers selfies pour-over. Pabst bushwick skateboard waistcoat migas, pork belly flexitarian asymmetrical echo park retro master cleanse XOXO viral lomo wolf. Kogi bicycle rights mumblecore mlkshk succulents, post-ironic beard ennui live-edge
                  man bun etsy.
          </p>
        </article>
      </div> <!-- .container -->
    </section> <!-- .section -->


    <section id="seven">
      <div class="container">
        <header>
          <h1 class="s-heading">Seventh Section Heading</h1>
        </header>
        <article>
          <p>Vegan yr tacos everyday carry, street art banjo cardigan four dollar toast franzen poutine wolf celiac portland keytar lo-fi. Williamsburg locavore blue bottle man bun XOXO, helvetica edison bulb.</p>
        </article>
      </div> <!-- .container -->
    </section> <!-- .section --> 

SCSS

    @import url(http://fonts.googleapis.com/css?family=Roboto:300,700);

    $blue: #6da5ff;
    $white: #f4f4f4;

    html,
    body {
      background: $blue;
      font-family: 'Roboto', sans-serif;
      font-weight:300;
      height: 100%;
    }

    *,
    *:after,
    *:before {
      box-sizing: border-box;
    }

    h1 {
      padding: 20% 0 0 0;
      margin: 0;
      text-align: center;
      font-size:2.2em;
    }

    p {
      font-size:1.2em;
      text-align: left;
      color: transparentize($white, .5);
      line-height: 1.5;
    }

    section {
      color: white;
      position: relative;
      height: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;

      &#one {
        background: $blue;
      }

      &#two {
        height: 1000px;
        background: lighten($blue, 5);

        &.is-active {
          background: darken($blue, 5);
        }

         .outer {
          height: 4000px;
        }

        .inner {
          height: 1000px;
          background-image: url(https://c1.staticflickr.com/2/1690/24482853472_282101f633_k.jpg);
          background-size: cover;
          background-position: center center;
          background-repeat: no-repeat;
        }
      }


      &#three {
        background: transparent;
        color: black;

        p {
          color: black;
        }
      }

      &#four {
        background: lighten($blue, 15);
      }



      &#five {
        height: 1000px;
        background: lighten($blue, 5);

        &.is-active {
          background: darken($blue, 5);
        }

         .outer {
          height: 3600px;
        }

        .inner {
          height: 1000px;
          background-image: url(https://c1.staticflickr.com/9/8532/8625031423_f8af1a4d83_k.jpg);
          background-size: cover;
        }
      }


      &#six {
        background: transparent;
      }


      &#seven {
        background: $blue;
      }  

      .container {
        padding:1em;
        position: relative;
        margin: 0 auto;
        max-width: 560px;
      }
    }

您可以在此处找到工作演示http://codepen.io/heavymessing/pen/WjbVNJ

谢谢，