Привязка к прокручивать прокрутки остановки

Question

Найти ниже референсного изображения:

То, что я хочу точно, когда только один раздел (Раздел 4) приходит в окна вид около 40% - 80%. На scroll остановка секции4 должна автоматически прокручиваться, чтобы она соответствовала window.

Здесь, основные fiddle без каких-либо скриптов.

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>

Я попытался jquery visible плагин, но это не помогло. Поэтому я добавил комментарий.

/* 
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});  
    } 
}); 
*/ 

Answer 1

Используйте скрипт для сравнения scrollTop экрана с offset().top и height в section.

Обратите внимание, что ratio определяет, сколько элементов видно на экране (более 0,6 используется для определения того, видно ли на экране более 60% изображения section).

Смотреть демо ниже с комментариями инлайн:

/*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>