jquery - 动画粘性菜单 JQUERY

Question

我做了一个粘性菜单，我已经可以让它工作了，基本上这是逻辑

//get menu from html
var menu = $('#menu-sticky');

//hide it
menu.hide();

//get offset top
var altura = $("#videoAltura").offset().top;

//show and hide it
$(window).on('scroll', function(){

    if($(window).scrollTop() > altura){
        menu.show();

    }else{
        menu.hide();
    }

});

它工作得很好，但我希望它在显示和隐藏时有动画，我想要这种动画:https://www.tesla.com/es_MX/roadster

请问你们能帮我吗？

Answer 1

基于检查图像元素，这里是图像处于事件状态时的 css。

[id='wrapper'] .scroll-reveal.active {
        opacity: 1;
        transition: transform 1.5s cubic-bezier(0.165,0.84,0.44,1),opacity 1.5s cubic-bezier(0.165,0.84,0.44,1);
        transform: translate3d(0px, 0px, 0px);
    }