jquery - 滚动屏幕百分比

Question

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

这是示例：http: //jsfiddle.net/NH6Km/2/

查询：

$(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;
}

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

Answer 2

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