2013-08-21 266 views
-1
  • 如何檢測用戶是否使用jQuery滾動屏幕的50%? (在這裏我可以說,如果它滾動50像素)
  • 然後,動畫,去#second或者,有什麼不一樣,前100%(它似乎動畫,但事情發生了疏遠)

這裏的例子:http://jsfiddle.net/NH6Km/2/滾動%屏幕

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; 
} 
+0

因此,當用戶開始滾動時,您想要中斷它們的滾動並滾動到下一個div。正確? –

+0

我嘗試動畫到下一個/ prev div,如果它在中間。這可能是用戶開始滾動時,或者當他完成滾動時可能更好? – Nrc

+0

你怎麼知道它是在中間? (簡單的答案)。當滾動停止時檢測,如果它在中間,則滾動到兩者中較近的一個。 –

回答

0

正如@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/