滚动屏幕的百分比答案

【问题标题】：scroll % of the screen滚动屏幕的百分比
【发布时间】：2013-08-21 14:17:03
【问题描述】：

如何使用 jQuery 检测用户是否滚动了 50% 的屏幕？（这里我可以说它是否滚动 50px）
然后，制作动画并转到 #second 或者相同的前 100%（它似乎动画但发生了一些奇怪的事情）

JQUERY：

$(function(){   
$(window).scroll(function() {
  if ($(window).scrollTop() > 50) { 
    ('body,html').animate({ scrollTop:             
    $('#second').offset().top }, 1500); 
  } 
});     
})

HTML：

<div id="first"></div>
<div id="second"></div>

CSS：

#first{
    position:absolute;
    width:100%; height:100%;
    background:blue;
} 
#second{
    position:absolute;
    top:100%;
    width:100%; height:100%;
    background:yellow;
}

【问题讨论】：

因此，当用户开始滚动时，您希望中断他们的滚动并让他们滚动到下一个 div。对吗？
如果它在中间，我会尝试为下一个/上一个 div 设置动画。可能是在用户开始滚动时，或者在用户完成滚动时更好？
怎么知道是不是在中间？（简单的答案）。检测滚动何时停止，如果它在中间，则滚动到两者中较近的位置。
@Kevin B. 是的，就是这样。你知道怎么做吗？
带有 javascript 和滚动事件。你还需要一个 setTimeout。如果不想自己写，就分块搜索，拼凑起来。

标签： jquery css jquery-animate

【解决方案1】：

正如@thecodedestroyer 所说，您可以使用滚动事件来执行以下操作：

var currentDiv = "#first";
var divArray = ["#first", "#second", "#third", "#fourth"];

$(window).on("scroll", function (e) {
    var ix = divArray.indexOf(currentDiv);
    if (ix >= 0) {
        if (window.pageYOffset > $(currentDiv).offset().top) {
            currentDiv = divArray[(ix + 1) % currentDiv.length];
        } else if (window.pageYOffset < $(currentDiv).offset().top) {
            currentDiv = divArray[(ix - 1) % currentDiv.length];
        }
        $("body, html").animate({
            scrollTop: $(currentDiv).offset().top
        }, 0);
        e.preventDefault();
        return false;
    }
});

这里有一个测试： http://jsfiddle.net/cxJQE/

【讨论】：

【解决方案2】：

使用滚动事件http://api.jquery.com/scroll/ 触发事件时使用此插件http://flesler.blogspot.com/2007/10/jqueryscrollto.html

【讨论】：