Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Wędrujące menu przy scrollowaniu
#1
Witam serdecznie,

Nigdzie nie mogłem znaleźć odpowiedzi na to pytanie, więc piszę tutaj.

Chodzi mi o zmianę rozmiarów menu i 'wędrowanie' przy scrollowaniu, w momencie gdy pierwotne menu nam zniknie z zasięgu wzroku (jak np. na allegro).

Zmianę sposobu wyświetlania można bezproblemowo rozwiązać, ale chodzi mi o tę interakcję w momencie zniknięcia naszego menu. W jaki sposób to zrobić, żeby było najwydajniejsze dla strony ? Łapać współrzędne górnej krawędzi ekranu i na tej podstawie wykonywać operację, czy jest lepszy sposób ?
Odpowiedz
#2
Masz kilka rozwiązań:
1) robisz normalnie nagłówek strony z menu. Gdy strona zjedzie kawałek (np 100px), nadajesz mu nową klasę, która zmienia jego wygląd i daje mu pozycjonowanie fixed. Dodatkowo musisz całą stronę przesunąć w dół by wypełnić dziurę po menu (fixed nie wpływa na resztę elementów). Dlatego ogólnie lepiej nadać jakąś klasę dla body. W skrócie:

jQuery:
Kod:
$(function() {
   $(window).on('scroll, resize', function() {
      var posTop = $(this).scrollTop(); //pobieramy pozycję scrolla
      if (postTop >= 100) { //jezeli wieksze od 100 to dodajemy klasę (zmieniamy na menu jezdzace)
            $('body').addClass('menu-hover');
      } else {
            $('body').removeClass('menu-hover');
      }
   }
});

style dla jezdzacego
Kod:
.menu {...tutaj style dla normalnego menu...}

body.menu-fixed .menu {position:fixed; width:100%; height:70px; z-index:100;}
body.menu-fixed {margin-top:70px;}

Ta metoda jest bardzo dobra semantycznie, bo masz tylko jedno menu i ogólnie krasnoludki są szczęśliwe. Ma też minusy. Głównym jest to, że to przejście między wyglądami (normalne, jeżdzące) jest skokowe. Jeżeli to ci przeszadza, wtedy skorzystaj z 2 wersji:

2) robisz 2 menu. Jedno jest tradycyjne. Musi mieć position:relative i z-index np 2. Drugie menu jest jezdzące. Musi mieć position:fixed i z-index:1. Gdy będziesz scrollował stronę, menu fixed wyjedzie spod menu normalnego.

Kod:
.menu {z-index:2; position:relative;}
.menu-fixed {z-index:1; position:fixed; width:100%;}

W tej metodzie zawsze też możesz poużywać fadeIn czy fadeOut, lub zamiennika z css:

Kod:
.visible {visibility:visible, opacity:1; transition:0.5s;}
.hidden {visibility:hidden; opacity:0;}
Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  problem z tłem pod menu loose 1 1,372 06-07-2017, 20:00
Ostatni post: loose
  problem z menu p410 10 4,586 18-06-2017, 18:34
Ostatni post: lemans88
  CSS dla menu i problem z selektorami neferith 4 2,459 30-06-2016, 00:58
Ostatni post: Brain23
  MENU - poważny problem wysokości! asus 0 1,414 05-12-2014, 23:34
Ostatni post: asus
  Trzypoziomowe menu - problem rejcz 3 2,629 25-01-2014, 17:16
Ostatni post: Kartofelek

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele