A Pen by Ramsay Lanier.

index.html

<div class="container">
  <div class="scroll-notification">SCROLL</div>
   <section class="section section-1 active" data-section="1">
     <h1 class="title">Section 1</h1>
     <p>(Scroll, yo!)</p>
  </section>
  
 <section class="section section-2 active" data-section="2">
     <h1 class="title">Section 2</h1>
  </section>
  
 <section class="section section-3" data-section="3">
     <h1 class="title">Section 3</h1>
  </section>
  
  <section class="section section-4" data-section="4">
     <h1 class="title">Section 4</h1>
  </section>
</div>

script.js

$(document).ready(function(){

  var sections = $('.section'),
      index = 0,
      windowHeight = $(window).height();
  
  $(window).on('scroll', function(){
    pos = $(window).scrollTop();
    offset = $(sections[index]).offset().top;
    color = $(sections[index + 1]).css("background-color");
    
    if (pos > offset - 1){
      index++;
      setTimeout(function(){
        $(sections[index]).css({
          "top": windowHeight * index,
          "height": windowHeight
        });
        $(sections[index]).addClass('active');
        $('.scroll-notification').css({
          "background-color":color
        })
      }, 1000);
      
    }

  });
});

Scrolling-sections-with-stops.markdown

Scrolling sections with stops

A Pen by Ramsay Lanier on CodePen.

License.

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Roboto:100,500);

*{
  box-sizing: border-box;
}

.container{
  font-family: "Roboto", sans-serif;
}

.scroll-notification{
  position: fixed;
  z-index: 100;
  width: 100px;
  height: 50px;
  bottom: 0px;
  left: 0px;
  text-align: center;
  padding: 20px;
  color: white;
  transition: all 300ms ease-out;
  
  background-color: green;
}

.section{
  width: 100%;
  height: 0vh;
  padding: 0px;
  left: 0; 
  opacity: 0.0;
  overflow: hidden;
  transition: all 600ms ease-out;
  position: absolute;
  color: white;
  text-align: center;
  font-weight: 100;
  
  &.active{
    opacity: 1.0;
    padding: 40px;
  }
}

.section-1{
  background-color: blue;
  height: 100vh;
}

.section-2{
  background-color: green;
  height: 100vh;
  top: 100vh;
}

.section-3{
  background-color: red;
}

.section-4{
  background-color: purple;
}

.title{
  font-size: 5rem;
  color: white;
  text-align: center;
  margin-bottom: 15px;
}