如何實現return false； 進入JavaScript if / else

Question

我正在嘗試構造一個導航欄，當頁面從頂部滾動離開時，導航欄會從高度：'70px'更改為高度：'50px'，然后每當頁面滾動回至頁面時，它就會變回高度：'70px'頂端。

為此，我嘗試了以下代碼：

// JavaScript Document
$(document).ready(function() {
$(window).scroll(function () {
    var scroll_top = $(this).scrollTop();
    if (scroll_top > 0){
        $('nav').animate({
            height:'50px'
        });
    }else{
        $('nav').animate({
            height:'70px'
        });
    }
    });
});

這段代碼發生的是頁面正確加載，並且我第一次向下滾動時動畫效果很好。 但是，每當我滾動到頂部時，它要么都不會變回高度：“ 70px”，要么（當我嘗試為其他值（例如寬度或不透明度）設置動畫時，最后一部分經常發生），整個導航欄看起來好像被圈住了一樣閃爍。

昨天我與一位程序員交談，他說聽起來好像頁面重新開動了，只要動畫時導航欄的像素值發生變化，就會形成無限循環。 他建議我實施return false； 解決這個問題的條件，但我不確定如何實現。 有什么幫助嗎？

關於如何以不同，更有效的方式實現相同效果的建議也將受到贊賞。

Answer 1

使它更簡單：

有一些CSS：

nav {
    height:50px;
    transition:height 0.4s ease;
}
nav.scrolledFromTop {height:70px}

現在您的jQuery：

$(window).scroll(function() {
    $("nav")[this.scrollTop > 0 ? "addClass" : "removeClass"]("scrolledFromTop");
});

完成！ 那就是CSS3的魔力；）