Question

我试图让我的导航淡出淡化的变化（ul li颜色和背景颜色）。我希望导航器恢复到原来的状态，但我在动画淡出时遇到了麻烦。

我尝试动画删除课程，但这会搞砸一切！

HTML

<div id="nav">
    <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</div>

JS

$(window).scroll(function () {
    var scroll_top = $(this).scrollTop();
    if (scroll_top >= 1) {
        $("#nav").addClass("nav-float");
    } else {
        setTimeout(function(){
            $("#nav").removeClass("nav-float");
        }, 1000 ).fadeOut("slow");
    }
});

CSS

body {
    background: #000;
    padding: 0;
    margin: 0;
    color: #00ff00;
}
#nav {
    width: 100%;
    height: 80px;
    border: 1px solid #ff0000;
}
#nav ul li {
    display: inline;
}
.nav-float {
    position: fixed;
    background: #fff;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}
.nav-float ul li {
    color: #ff0000;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}

Answer 1

您可以将css transition从.nav-float班级移至#nav班级。然后你可以简单地添加或删除类：

$(window).scroll(function () {
    var scroll_top = $(this).scrollTop();
    if (scroll_top >= 1) {
        $("#nav").addClass("nav-float");
    } else {
        $("#nav").removeClass("nav-float");
    }
});

Working fiddle is here

淡化导航并在向下滚动时固定导航，在向上滚动时淡入淡出

1 个答案: