Q:

Snap to scroll in scroll stop

Find below image reference:
 
What I want exactly is when only one section (section4) comes in window view around 40% - 80%. On scroll stop the section4 should auto scroll to fit on window.
Here, The basic fiddle without any script.

body,
html {
  height: 100%;
  margin: 0;
}
.sections {
  height: 100%;
  background: #000;
  opacity: 0.7;
}
#section2 {
  background: #ccc;
}
#section3 {
  background: #9c0;
}
#section4 {
  background: #999;
}
#section4 {
  background: #ddd;
}
<div class="sections" id="section1"></div>
<div class="sections" id="section2"></div>
<div class="sections" id="section3"></div>
<div class="sections" id="section4"></div>
<div class="sections" id="section5"></div>

I have tried jquery visible plugin but it didn't help. So I have put commented one.
/*
var ww = $(window).width();
$(window).scroll(function(){
  if ($('#section3').visible(true)) {
    $('body, html').animate({scrollTop: $('#section4').offset().top});
  }else if($('#section5').visible(true)) {
  $('body, html').animate({scrollTop: $('#section4').offset().top});    
  }
});
*/

A:

Use script to compare the scrollTop of the screen with the offset().top and the height of the section.
Note that ratio determines how much the element is seen on the screen (greater that 0.6 is used to determine if more than 60% of the section is visible on screen).
See demo below with comments inline:

/*debouce (courtesy:underscore.js)*/
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// scroll listener
$(window).scroll(debounce(function() {
  var $window = $(window);
  // change this to '.sections' if you want the effect for all sections
  $('#section4').each(function() {
    var top_of_element = $(this).offset().top;
    var bottom_of_element = $(this).offset().top + $(this).outerHeight();
    var bottom_of_screen = $window.scrollTop() + $window.height();
    var top_of_screen = $window.scrollTop();
    var height_of_element = $(this).outerHeight();

    // if element below top of screen
    if (top_of_element > top_of_screen && bottom_of_screen < bottom_of_element) {
      var ratio = (bottom_of_screen - top_of_element) / height_of_element;
      if (ratio > 0.6) {
        // animate by scrolling up
        $('body, html').animate({
          scrollTop: $(this).offset().top
        });
      }

    }
    // if element above top of screen
    else if (bottom_of_element > top_of_screen && bottom_of_screen > bottom_of_element) {
      var ratio = (bottom_of_element - top_of_screen) / height_of_element;
      if (ratio > 0.6) {
        // animate by scrolling down
        $('body, html').animate({
          scrollTop: $(this).offset().top
        });
      }
    }
  });
}, 250));
body,
html {
  height: 100%;
  margin: 0;
}
.sections {
  height: 100%;
  background: #000;
  opacity: 0.7;
}
#section2 {
  background: #ccc;
}
#section3 {
  background: #9c0;
}
#section4 {
  background: #999;
}
#section4 {
  background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sections" id="section1"></div>
<div class="sections" id="section2"></div>
<div class="sections" id="section3"></div>
<div class="sections" id="section4"></div>
<div class="sections" id="section5"></div>

