• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Sticky menu - animacja jego schowania

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
293 wizyt
pytanie zadane 9 kwietnia 2020 w JavaScript przez Whynotslave Początkujący (250 p.)

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^^

komentarz 9 kwietnia 2020 przez cani Bywalec (2,060 p.)

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

position: sticky

 

komentarz 9 kwietnia 2020 przez Whynotslave Początkujący (250 p.)

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

Dodanie tego atrybutu raczej nic nie wniesie.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 508 wizyt
pytanie zadane 15 stycznia 2018 w HTML i CSS przez SzukającyPrzygód Bywalec (2,310 p.)
0 głosów
2 odpowiedzi 566 wizyt
pytanie zadane 14 marca 2018 w HTML i CSS przez Bembnias Początkujący (450 p.)
+1 głos
1 odpowiedź 445 wizyt
pytanie zadane 8 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)

93,190 zapytań

142,205 odpowiedzi

322,032 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2817p. - dia-Chann
  2. 2769p. - Łukasz Piwowar
  3. 2759p. - Łukasz Eckert
  4. 2738p. - CC PL
  5. 2704p. - Tomasz Bielak
  6. 2678p. - Łukasz Siedlecki
  7. 2666p. - rucin93
  8. 2485p. - Marcin Putra
  9. 2418p. - Michal Drewniak
  10. 2367p. - Adrian Wieprzkowicz
  11. 2317p. - Mikbac
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1628p. - Dominik Łempicki (kapitan)
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...