滾動功能不火的動畫正確

我有一個簡單的.scroll()函數來觸發一個事件，如果身體的.scrollTop()比規定值更高：滾動功能不火的動畫正確

$(window).scroll(function() { 
    if($('body, html').scrollTop() > 250) { 
     console.log("higher"); 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } else { 
     console.log("lower"); 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

問題我有是，它觸發每個滾動像素的功能。我只想根據scrollTop的值開火動畫。

我該如何解決這個最好的方法？

感謝

來源

2014-10-28 supersize

滾動的每一個像素，你要麼得到一個更高或更低。您的代碼按預期工作。 – cforcloud 2014-10-28 14:53:56

@cforcloud是正確的，但我只是想檢測'scrollTop'值，不會觸發每個滾動像素上的動畫。 – supersize 2014-10-28 14:54:54

你可以使用一個延遲來獲取值，只有每x秒或scrollTop差異，以獲得它每x像素 – Andi 2014-10-28 14:56:39

試試這個

var _top, _last_top = -1; 
$(window).scroll(function() { 
    _top = $('body, html').scrollTop(); 

    if(_top > 250 && _last_top < 250) { 
     _last_top = _top; 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } 

    if(_top < 250 && _last_top > 250) { 
     _last_top = _top; 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

來源

2014-10-28 15:03:05 cforcloud

感謝隊友時它不會動畫回來，效果很棒！ – supersize 2014-10-28 15:08:35

查看窗口版本。我真的不相信這在最新的Chrome中可以正常工作：/。 – Hless 2014-10-28 15:09:53

這是因爲你來自body和功能html越來越scrollTop值。根據瀏覽器的不同，這會給你一些不可預知的結果。您只需要獲得scrollTop的值body。

$(window).scroll(function() { 
    console.log($('body').scrollTop()); 
    if($('body').scrollTop() > 250) { 
     console.log("higher"); 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } else { 
     console.log("lower"); 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

http://jsfiddle.net/xxs82dsk/

編輯：顯然得到的window解決問題的跨瀏覽器scrollTop值。在FF和Chrome對我來說：

$(window).scroll(function() { 
    console.log($(window).scrollTop()); 
    if($(window).scrollTop() > 250) { 
     console.log("higher"); 
     $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
    } else { 
     console.log("lower"); 
     $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
    } 
});

http://jsfiddle.net/ushopako/

來源

2014-10-28 14:58:17 Hless

我認爲這是交叉瀏覽器所必需的！ Gecko使用與Webkit不同的元素來讀取'body'的scrollTop。 – supersize 2014-10-28 15:01:50

試試吧。我的例子在最新的Chrome中按預期工作。它在Firefox中做了反對。你應該在Firefox中使用'html' ...不知道爲什麼。 FF版本：http://jsfiddle.net/xxs82dsk/2/ – Hless 2014-10-28 15:02:23

使用窗口而不是body或html。兩者都很有魅力。 ;） – Hless 2014-10-28 15:07:25

隨着攔截變量，這應該工作。

var animateOnce = false; 
$(window).scroll(function() { 
    if($('body, html').scrollTop() > 250) { 
     if(animateOnce == false) { 
      $('#navbar').animate({paddingTop: 5, paddingBottom: 5}, 'slow'); 
     } 
     animateOnce = true; 
    } else { 
     if(animateOnce == true) { 
      $('#navbar').animate({paddingTop: 25, paddingBottom: 25}, 'slow'); 
     } 
     animateOnce = false; 
    } 
});

來源

2014-10-28 15:02:27 Andi

'> 200'運行良好，但是當<200' – supersize 2014-10-28 15:09:29

滾動功能不火的動畫正確

回答

相關問題