使用jQuery.scroll檢測滾動高度（）

我有一個＃top-div顯示「到站點的頂部」-text。當我做下面的代碼它沒有「其他」的作品 - 然後在滾動700px後顯示div。使用jQuery.scroll檢測滾動高度（）

但「其他」不起作用，它根本不會顯示。當您再次滾動到站點的頂部時，應該隱藏div。

任何幫助表示讚賞。

$(window).scroll(function() { 
    scrollet = $(window).scrollTop(); 
    if(scrollet > 700) { 
     $("#top").animate({"opacity":"0.6"}); 
    } 
    else { 
     $("#top").animate({"opacity":"0"}); 
    }

來源

2013-03-24 BTB

所以，如果你離開了'else'子句的代碼工作，除了頂格不會再隱藏，當你添加其他它停止工作的條款？ – 11684 2013-03-24 11:31:33

控制檯中的任何錯誤？ – 11684 2013-03-24 11:32:07

是的，當我添加「其他」時，它實際上只顯示如果刷新網站，而其滾動到底部。但如果你向上滾動，它不會隱藏。。沒有錯誤:( – BTB 2013-03-24 11:35:11

我懷疑如預期，當您滾過700像素邊界來回動畫效果已排隊的動畫不能正常工作。

當使用動畫時，告訴jQuery「放棄你現在正在做的事情，停止動畫隊列並按照你現在所說的去做」是很重要的。這意味着，你將不得不鏈.animate後面.stop方法（read about .stop()），即：

$(window).scroll(function() { 
    scrollet = $(window).scrollTop(); 
    if(scrollet > 700) { 
     $("#top").stop(true, false).animate({"opacity":"0.6"}); 
    } 
    else { 
     $("#top").stop(true, false).animate({"opacity":"0"}); 
    } 
}

的.stop(true, false)一種方法是強制的jQuery清除動畫隊列，但該元素跳不強制的結束動畫 - 這是因爲當用戶滾動時，多次觸發.scroll()事件。如果我們使用.stop(true, true)，轉換將是突然的。

替代品包括：

Debouncing or throttling的.scroll()事件
不要使用.animate()，但簡單地使用CSS設置不透明度和採取CSS轉換，例如優勢transition: opacity .25s ease-in-out。

這裏是證明了概念小提琴 - http://jsfiddle.net/teddyrised/zdpMd/

來源

2013-03-24 11:52:11 Terry

工作就像一個魅力謝謝你，我不知道那:-) – BTB 2013-03-24 12:04:11

哦，我忘了提，動畫不會實際工作也很好！ - 因爲'.scroll（）'事件被觸發非常頻繁，當用戶滾動頁面，導致不透明度爲突然切換 - 因此而不是迫使瀏覽器跳轉到最後出場的，請嘗試使用'.stop（真，假）'。 – Terry 2013-03-24 12:09:55

使用jQuery.scroll檢測滾動高度（）

回答

相關問題