javascript - 向滚动顶部菜单添加动画

Question

所以我在搞乱让菜单在某个div之后动画化。我让它可以显示出来，但不能真正制作动画。我已经尝试过一些不同的东西，比如 .animate 或 fadein，但它不起作用。不知道我做错了什么，但请注意，我是一个 jquery 菜鸟。

所以我的问题是如何轻松地制作动画？

我的代码:

/* Menu show */
$(window).scroll(function () {
    var menuBG = $('.menu'),
        targetScroll = $('#slide2').position().top,
        currentScroll = $('html').scrollTop() || $('body').scrollTop();
    menuBG.toggleClass('show-menu', currentScroll >= targetScroll);
});

Answer 1

有很多方法可以实现这一目标。我将演示两个基于 jQuery 的示例，并对原始代码进行一些更改，以及另一个基于 CSS3 的示例，对原始代码没有任何更改，但在 css 中添加了一些内容。

示例 1 - jquery

jsFiddle

html

<div class="menu">this is the red menu</div>
<div id="slide2">this the blue slide2</div>

CSS

.menu{
    height:50px;
    background-color:red;
    display:none;
    position:fixed;
}

/*.menu.show-menu{
    display:block;
}*/

#slide2{
height:800px;
    background-color:blue;
}

js

$(window).scroll(function () {
    var menuBG = $('.menu'),
        targetScroll = $('#slide2').position().top,
        currentScroll = $('html').scrollTop() || $('body').scrollTop();
    //menuBG.toggleClass('show-menu', currentScroll >= targetScroll);
    if(currentScroll>=targetScroll){
        $('.menu').fadeIn(1000);
        $('.menu').addClass('show-menu');
    }else{
        $('.menu').stop();
        $('.menu').removeClass('show-menu');
        $('.menu').fadeOut(500);
    }
});

示例 2 - css3

jsFiddle

CSS

.menu{
    transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;
    height:50px;
    background-color:red;
    /* display:none; */
    opacity:0;
    position:fixed;
}

.menu.show-menu{
    /* display:block; */
    opacity:1;
}

#slide2{
height:800px;
    background-color:blue;
}