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'，或者（当我尝试设置其他值（例如宽度或不透明度）的动画时，这最后一部分发生了很多）整个导航栏看起来闪烁，好像它被圈住了一样。

昨天我与一位程序员交谈，他说这听起来像是重新触发的页面。任何时候导航栏的像素值在制作动画时都会发生变化，从而产生无限循环。他建议我实施一个假回报;解决这个问题的条件，但我不确定如何实现它。有什么帮助吗？

关于如何以不同，更有效的方式实现同样效果的建议也将受到赞赏。

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的神奇之处;）

我如何实现return false;如果是/否则进入JavaScript

1 个答案: