CODEWITHSUNDEEP
jqueryjquery-animate
Julio Guzman
Julio Guzman

Reputation: 45

Animate a sticky menu JQUERY

I have made an sticky menu, i could make it work already, basically this is logic

//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();
    }

});

It worked perfectly but I want it to have an animation while showing and hidding, I want this kind of animation: https://www.tesla.com/es_MX/roadster

Could you guys help me please?

Upvotes: 2

Views: 59

Answers (1)

Jay Marvin
Jay Marvin

Reputation: 79

Based on inspecting the element of the image here is the css when the image is active.

[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);
    }

Upvotes: 2

Related Questions