Sticky menu - animacja jego schowania

Question

Mamy belkę schowaną domyślnie za okno przeglądarki top: -80px;

Mamy kod z jednego z filmów Anrzeja Zelenta:

$(document).ready(function() {
            var NavY = $('.contactSmall').offset().top;

            var showNav = function(){
                var ScrollY = $(window).scrollTop();
        
                if (ScrollY > NavY) {
                $('.sticky_menu1').addClass('showMenu');
                
            }
            else {
                $('.sticky_menu1').removeClass('showMenu');
               
            }
                };
        
                showNav();
        
                $(window).scroll(function() { showNav(); });
                
                
            });

Klasa showMenu jest animacją:

.showMenu
{
    animation: visible;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
    @keyframes visible
    {
        0%{}
        100%{top: 20px;}
    }

Animacja wysunięcia menu działa super ale gdy scrolluje spowrotem to w podpowiednim momencie po porstu znika i tutaj chciałbym wstawić animacje odwrotną, by zamiast zniknąć elegancko wsunęła się za okno przeglądarki.

Próbowałem kombinować z odwrotną animacją ale nic z tego nie wyszło, ponieważ gdy dodam kolejną klasę to nałożą się na siebie i lipa. Podobnie jeżeli zostawie elsa usuwającego klasę jednocześnie dodając nową również wychodzi klapa.

Myślałem, by po prostu zamiast obiekt.addClass, zmienić styl o  tak: obiekt.style. animation = 'hidden' ale w tym przypadku JS nawet nie reaguje.

somebody?

 

ps. dodatkowo belka jest wysunięta poza ekran o top: -80px, a animacja przywraca ją w miejsce domyślne przy wartości top: 20px; tego tez nie rozumiem^^

Comments

może dodaj do klasy showMenu, tą linię 

position: sticky

 

---

Klasa .sticky_menu1 ma position: fixed; i jest schowana pod ekran przeglądarki top: -80px;

Dodanie tego atrybutu raczej nic nie wniesie.