如何实现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的魔力；）