jQuery的滾動功能不能在這裏工作

http://jsfiddle.net/asif097/AzRtC/3 jQuery的滾動功能不能在這裏工作

正如你可以看到有兩個按鈕，點擊時第一按鈕是一些jQuery的功能beeing運行（參見下文紅格，更多的內容被加載），同發生在第二個按鈕上。

現在我想使用jquery滾動功能，而不是點擊功能（運行與點擊相同的jquery動畫）。

試過這一個，但沒有奏效。任何一個修復代碼？

注：我是jquery的新手。

$(window).scroll(function() { 
    if ($(this).scrollTop() > 1000) { // instead of the click button#go tried bellow code 
     $(".more").css("display", "block"); 
     $("#block1").removeAttr('style'); 
     $("#block2").removeAttr('style'); 
     $("#block3").removeAttr('style'); 
     $("#block4").removeAttr('style'); 
     $("#block5").removeAttr('style'); 
     $("#block1").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: 0, 
      top: 0, 
      }, 1300, 'easeOutExpo'); 

     $("#block2").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: 0, 
      top: 0, 
      }, 2000, 'easeOutExpo');; 

     $("#block3").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: "13px", 
      }, 2000, 'easeOutExpo'); 

     $("#block4").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: "-208px", 
      marginRight: 0 
      }, 2000, 'easeOutExpo'); 

     $("#block5").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: "13px", 
      marginRight: 0 
      }, 2000, 'easeOutExpo'); 

    } 

    else if ($(this).scrollTop() > 1000) { // instead of the click button#go2 tried bellow code 
     $(".more2").css("display", "block"); 
     $("#block6").removeAttr('style'); 
     $("#block7").removeAttr('style'); 
     $("#block8").removeAttr('style'); 
     $("#block9").removeAttr('style'); 
     $("#block10").removeAttr('style'); 
     $("#block6").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: 0, 
      top: 0, 
      }, 1300, 'easeOutExpo'); 

     $("#block7").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: 0, 
      top: 0, 
      }, 2000, 'easeOutExpo'); 

     $("#block8").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: "13px", 
      }, 2000, 'easeOutExpo'); 

     $("#block9").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: "-208px", 
      }, 2000, 'easeOutExpo'); 

     $("#block10").css('display', 'block').animate({ 
      opacity: 1, 
      marginTop: "13px", 
      }, 2000, 'easeOutExpo'); 
    } 

    else { 
     return false; 
    } 
});

來源

2013-02-06 Asif

與您的代碼唯一的問題是，$(this).scrollTop()不會比1000大。

根據該定義的.scrollTop()

垂直滾動位置是相同的，是根據考慮到滾動區以上隱藏的像素的數量。如果滾動條位於頂部，或者元素不可滾動，則該數字將爲0.

所以當滾動到底部時，窗口的高度不同時，它會有所不同。

所以我用$(this).scrollTop()+$(window).height()代替$(this).scrollTop()，它幾乎是一樣的。

這裏是jsfiddle。 http://jsfiddle.net/AzRtC/5/

來源

2013-02-06 02:34:24 pktangyue

好的，謝謝你的幫助。現在我嘗試了這個'if（$（this）.scrollTop（）> 400）{}'這個很好用，但是當我使用'else if（$（this）.scrollTop（）> 800）{}'it不再發射更多的功能，該怎麼做？ – Asif

@Asif我找到了一個更好的解決方案，並更新我的文章 – pktangyue

@ pktangyue-是的（好＆gt; && <）。現在它的工作，非常感謝。 – Asif

jQuery的滾動功能不能在這裏工作

回答

相關問題