Question

如何检测用户是否使用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;
}

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

滚动屏幕的％

2 个答案: