スナップ

Question

は、画像参照の下に検索スクロール停止にスクロールします：唯一つのセクション（section4）は約40％ウィンドウ表示になると私は正確にしたいことはある

から80パーセント。 の場合、セクション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プラグインを試してみましたが、それは助けにはなりませんでした。だから私はコメントしました。 offset().topとsectionのheightで画面のscrollTopを比較する

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

使用スクリプト。

ratioは、画面上に表示される要素の量を決定します（sectionの60％以上が画面に表示されるかどうかを判断するために0.6を使用します）。

コメントインラインでデモ以下参照：また

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