向滚动顶部菜单添加动画

Add animation to scrolltop menu

本文关键字：添加 动画 菜单 顶部 滚动      更新时间：2023-09-26

所以我是搞乱了让菜单动画在一个特定的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);
});

有很多方法可以做到这一点。我将演示两个，一个基于jQuery，对原始代码进行了一些更改，另一个基于CSS3，对原始代码没有更改，但在css中添加了一些内容。

示例1 - jquery

jsFiddle 

<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;
}
相关文章：