Menu jest stałe podczas przewijania i rozciągania. Jak zablokować warstwę, aby pozostawała w jednym miejscu podczas przewijania strony? Jak zrobić dolne stałe menu

Tworząc stronę internetową często trzeba mieć na oku menu poziome, które zawiera główną nawigację serwisu. Sposób „naprawienia” poziomego menu jest wygodny z punktu widzenia odwiedzającego, który „ma nawigację zawsze pod ręką”, niezależnie od tego, jak bardzo kręcisz kołem w dół lub w górę.

Naprawianie menu poziomego za pomocą CSS: position:fixed

Z jednej strony wszystko jest proste i łatwe do rozwiązania za pomocą CSS w mgnieniu oka. Przykład układu HTML stałego menu poziomego:

dom
Aktualności
Łączność
Szukaj

[zawartość strony] [stopka witryny]

Układ CSS stałego menu poziomego:

# menu-góra-prawie-stała(pozycja: stała; góra: 10px; lewa: 0; wysokość: 30px; szerokość: 100%; margines: 0; )

Ustawmy teraz wcięcie zawartości strony na wysokość menu:

#content (górny margines: 30px;)

I teraz „prawie” nam się to udało. Menu jest zawsze widoczne dla odwiedzającego. Ale co zrobić, jeśli w naszym projekcie mamy nagłówek witryny, po nim samo menu, a w nagłówku mamy logo, motto witryny i banery.

Cóż, możemy naprawić nagłówek witryny, ustawiając wcięcie treści na taką samą wysokość jak nagłówek i menu, wraz z wcięciem między nimi. Ale pojawia się problem. Znacząco ograniczamy przestrzeń, w której nasi goście mogą przeglądać zawartość strony. Opcja rezygnacji z capa zupełnie nam nie odpowiada.

Naprawianie poziomego menu za pomocą JavaScript

Rozważmy więc opcję, gdy menu „przechodzi” za nagłówek witryny, ale jeśli odwiedzający aktywnie przewija w dół, menu jest „naprawione” u góry i pozostaje na swoim miejscu. Nagłówek witryny nie jest widoczny. Jeśli odwiedzający powróci do nagłówka strony, menu „staje się” na swoim miejscu „za nagłówkiem witryny”. Na początek oto pełny układ HTML przykładowego układu strony:

Logo strony internetowej Hasło strony internetowej Baner

dom
Aktualności
Łączność
Szukaj

[zawartość strony] [stopka witryny]

Nasz szablon strony internetowej składa się z kilku typowych obszarów:

nagłówki witryn – #nagłówek, wysokość 150px
menu poziome – #menu-top-prawie-naprawione– wysokość 30px,
główny obszar informacyjny strony – #treść,
stopka witryny - #stopka.

Oto układ CSS:

#menu-top-prawie-stały (pozycja: stała; margines: 0; lewy: 0; górny: 150 pikseli; wysokość: 30 pikseli; ) #header( wyświetlacz: blok; wysokość: 150 pikseli; przepełnienie: ukryty; pozycja: względna; margines -dół: 55px; ) #menu-top-prawie-naprawione ul, #menu-top-prawie-naprawione li(styl listy: brak; margines: 0; dopełnienie: 0; ) #menu-góra-prawie-naprawione ul (wyświetlanie: blok; wyrównanie tekstu: środek; szerokość: 100%; pływak: lewy; ) #menu-top-prawie-stały ul li( wyświetlacz: inline; wysokość linii: 30px; szerokość: 120px; dopełnienie: 0 5px ; wyrównanie tekstu: do środka; )

Najpierw ustawmy wcięcie od nagłówka do treści równe wysokości naszego menu + małe wcięcie z marginesem dla estetycznej urody. #header (margines-dolny: 55px;). Naprawmy nasze menu tuż za nagłówkiem: #menu-top-prawie-fixed( pozycja: stała; margines: 0; lewy: 0; górny: 150px; wysokość: 30px;).

Teraz zadbajmy o to, aby podczas przewijania menu „zatrzymywało się” dokładnie na górze strony. Umieśćmy następujący JavaScript pomiędzy i :

JavaScript:

zm1 = 150; /* wysokość nagłówka w pikselach */ var m2 = 2; /* wcięcie, gdy nagłówek nie jest już widoczny podczas przewijania */ var menuID = "menu-top-prawie-stałe"; /* identyfikator menu poziomego do przypięcia */ var menuOpacityOnChange = "0.7"; /* przezroczystość menu podczas przewijania: 1 - nieprzezroczyste, 0,5 - półprzezroczyste 0,0 - całkowicie przezroczyste */ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; /* funkcja umożliwiająca w różnych przeglądarkach określenie wcięcia od góry dokumentu do aktualnej pozycji suwaka */ funkcja getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "number" ) ( //zgodny z Netscape scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //zgodny z DOM scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY; ) /* funkcja ustawiająca górne dopełnienie dla elementu zmiennoprzecinkowego poprawione menu poziome zależne od pozycji scrollera i widoczności nagłówków */ funkcja marginesMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefiniowane" && s)( if (top +m2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Przykładową implementację można zobaczyć, klikając ten link i korzystając z kółka przewijania. Zatem tutaj wszystko jest proste. W ustawieniach przekazujemy do skryptu następujące parametry:

zm1 = 150; - wysokość nagłówka w pikselach,
var m2 = 2; - wcięcie, gdy nagłówek nie jest już widoczny podczas przewijania,
var menuID = „menu-górne-prawie-naprawione”; - identyfikator menu poziomego do przypięcia,
var menuOpacityOnChange = „0,7”; - przejrzystość menu podczas przewijania:
- 1 - nieprzezroczysty
- 0,5 – półprzezroczysty
- 0,0 - całkowicie przezroczysty

W tej wersji nieco „dopracowaliśmy” nasze menu, a podczas przewijania dodajemy mu przezroczystość. Od razu nasuwa się bardziej klasyczna opcja, gdy nie zmieniamy przezroczystości menu, a po prostu robimy tło dla menu w postaci tła z kolorem menu i dolną półprzezroczystą ramką (w której gradient płynnie „przechodzi” ” z koloru nieprzezroczystego na przezroczysty):

Zmieńmy trochę układ CSS dla naszego poziomego, stałego menu:

#menu-top-almost-fixed (pozycja: stała; margines: 0; lewy: 0; górny: 150 pikseli; wysokość: 30 pikseli; tło: url(./images/white-gradient-l.png) lewy dolny róg powtórz-x ;)

Podajmy teraz zmodyfikowany kod javascript, który umieścimy pomiędzy i :

JavaScript:

zm1 = 150; /* wysokość nagłówka w pikselach */ var m2 = 0; /* wcięcie, gdy nagłówek nie jest już widoczny podczas przewijania */ var menuID = "menu-top-prawie-stałe"; /* funkcja umożliwiająca w różnych przeglądarkach określenie wcięcia od góry dokumentu do aktualnej pozycji suwaka */ funkcja getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "number" ) ( //zgodny z Netscape scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //zgodny z DOM scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY; ) /* funkcja ustawiająca górne dopełnienie dla elementu zmiennoprzecinkowego poprawione menu poziome zależne od pozycji scrollera i widoczności nagłówków */ funkcja marginesMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefiniowane" && s)( if (top +m2< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Zatem tutaj wszystko jest proste. W ustawieniach przekazujemy do skryptu następujące parametry:

zm1 = 150; - wysokość nagłówka w pikselach,
zm. m2 = 0; - wcięcie, gdy nagłówek nie jest już widoczny podczas przewijania.

Menu działa dobrze, ale jeśli ponownie załadujesz stronę, menu pojawi się z pierwszym wcięciem

Jeżeli jest taki problem to po jednokrotnym załadowaniu strony należy wywołać menu. Aby to zrobić, zmień kod wywołania funkcji z:

Funkcja setMenuPosition())( if(typeof window.addEventListener != "niezdefiniowany")( window.addEventListener("scroll", marginalMenuTop, false); ) else if(typeof window.attachEvent != "niezdefiniowany")( window.attachEvent („onscroll”, marginesMenuTop); ) );

Do następującego kodu:

Po załadowaniu strony od razu wywołujemy naszą funkcję marginalMenuTop, która sprawdzi położenie menu na stronie i zastosuje pożądany styl

Implementacja częściowo naprawionego menu przy użyciu wtyczki Afixx jQuery z Twitter Bootstrap

Kontynuując ten temat, napisano dla Ciebie artykuł na temat implementacji prawie stałego menu przy użyciu wtyczki jQuery Affix z frameworka Twitter Bootstrap.

Pierwszą rzeczą, którą zrobimy, to wkleimy nasz kod HTML w miejscu na Twojej stronie, w którym chcesz zobaczyć menu.

dom
WordPressa
HTML5 i CSS3
PHP

Menu ma przypisaną domyślną klasę, dzięki czemu nasze jquery może następnie określić, że ten konkretny blok należy następnie przypiąć na górę.

2. Kod jQuery

W nagłówku, przed głowicą zamykającą, wstaw kod. Jak pisałem powyżej definiuje blok z domyślną klasą i po przewinięciu przypisuje mu klasę stałą. Jeśli zajdzie taka potrzeba, możesz zmienić nazwy klas. Ale bądź ostrożny i niczego nie przeocz, w przeciwnym razie wszystko po prostu przestanie działać. Musisz zmienić jQuery, HTML i CSS.

$(dokument).ready(function())( var $menu = $("#menu"); $(okno).scroll(function())( if ($(this).scrollTop() > 100 && $ menu.hasClass("domyślne")( $menu.fadeOut("szybkie",funkcja())( $(this).removeClass("domyślne") .addClass("naprawiono transbg") .fadeIn("szybkie") ; )) ; ) else if($(this).scrollTop()

Należy pamiętać, że jeśli w kodzie zawartym w echo „” znajdują się pojedyncze cudzysłowy, należy je zmienić, tj. umieść ukośnik odwrotny (\) przed każdym z nich, oczywiście bez nawiasów.

Ogólnie rzecz biorąc, okazało się, jak się okazało. Będziesz musiał sam zdecydować, jak konkretnie powiązać to z tematem – kiedy masz czas, fajnie jest „dręczyć swój mózg”. Dziękuję.

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz być zainteresowany

WebPoint PRO to responsywny motyw WordPress z szeroką funkcjonalnością i kompetentną techniczną optymalizacją wyszukiwarek
Share42 - skrypt dodający do serwisu przyciski i zakładki społecznościowe (istnieje opcja pływającego panelu)

Które coraz częściej można znaleźć na stronach blogów i innych zasobach. Stosowanie takich pasków nawigacyjnych jest w pełni uzasadnione. Jednym z głównych powodów aktywnego korzystania z wtyczek jQuery jest to, że menu jest zawsze w zasięgu ręki odwiedzającego, nawet jeśli znajduje się na dole strony. Dodatkowo stałe menu zajmuje niewiele miejsca i nie odrywa uwagi od głównej treści. Ogólnie rzecz biorąc, stałe menu poprawia użyteczność witryny.
Zebrałem kolekcję najlepszych, moim zdaniem, darmowych wtyczek jQuery do implementacji stałego menu. Starałem się, aby każda z wtyczek była w jakiś sposób wyjątkowa, tak aby każda wybrana wtyczka mogła zostać wykorzystana konkretnie w Twoim projekcie. W kolekcji można znaleźć zarówno proste, jak i bardziej złożone wtyczki z animacją itp.
Jeśli potrzebujesz bardzo prostego, stałego menu, coś w rodzaju tego, jak zaimplementowaliśmy lepki panel z przyciskami społecznościowymi, możesz obejść się bez wtyczek jQuery, ponieważ ładowanie strony ze skryptami nie jest zbyt dobre, ale porozmawiamy o tym w kolejnych artykułach. Subskrybuj nasz kanał lub strony, aby nie przegapić ciekawych materiałów.
Więc. Oto 6 wtyczek jQuery do tworzenia stałego menu.

Naprawiono wtyczkę nawigacyjną Auto-Hide Sticky HeaderjQuery, która działa na podobnej zasadzie jak powyższy skrypt, ale mniej płynnie, choć na pierwszy rzut oka trochę łatwiej. Niestety nie mogę powiedzieć, że nawigacja jest w pełni adaptacyjna, ponieważ na małych ekranach pozycje menu stają się po prostu liczbami, co jest bardzo dziwne.

Efekty nagłówka przewijania Potężna wtyczka jQuery dla stałego paska nawigacji. Podczas przewijania możesz ustawić określone segmenty strony, po dotarciu do których panel ulegnie transformacji i może całkowicie zmienić swój wygląd. Na stronie może znajdować się dowolna liczba takich segmentów.

Animowany nagłówek podczas przewijania Dobra wtyczka do implementacji lepkiego paska nawigacji. Działa to tak: na samym początku strony widzimy wysoki nagłówek zawierający logo i menu. Podczas przewijania obszar nagłówka ze wszystkimi elementami, w tym logo i nawigacją, płynnie zmniejsza się za pomocą właściwości i staje się wąskim paskiem przyklejonym do góry ekranu.

Dziś naprawiamy menu podczas przewijania strony, przyjrzyjmy się najlepszej opcji realizacji.

Jak naprawić menu?

Istnieją 2 sposoby naprawienia menu:

Napraw menu tylko wtedy, gdy strona przewinęła się wystarczająco w dół
Napraw menu na stałe

Naprawa menu podczas przewijania strony

Ta metoda wymaga JS i CSS. Najpierw musimy określić, jak daleko strona przewinęła się w dół, a następnie, jeśli ta wartość jest większa od określonej wartości (na przykład większa niż rozmiar ekranu), naprawimy menu. Spójrzmy na przykład:

$(okno).scroll(function())( var docscroll=$(dokument).scrollTop(); if(docscroll>$(okno).height())( $("nav").css(("wysokość " : $("nav").height(),"width": $("nav").width())).addClass("fixed"); )else( $("nav").removeClass(" naprawiono „); ) ));

Czyli przewijając stronę sprawdzamy „czy ilość przewinięć strony jest większa od wysokości okna”, a jeśli jest większa to dodajemy do naszego menu stałą klasę (oraz określamy wysokość i szerokość, ponieważ przy użyciu pozycji: naprawiono utratę wymiarów bloku), w przeciwnym razie usuń tę klasę.

Naprawiono (pozycja: stała; góra: 0; lewa: 0; )

Oznacza to, że jeśli taka klasa jest obecna, obiekt zostanie naprawiony.

Gotowy. Menu będzie się trzymać tylko wtedy, gdy użytkownik przewinie stronę bardziej niż rozmiar ekranu. Oczywiście możesz naprawić menu po tym, jak użytkownik przewinie stronę o wielkość samego menu lub o jakąś z góry ustaloną wartość.

Zawsze ustalamy menu (druga opcja ustalenia)

Do tej metody potrzebujemy tylko CSS. Naprawimy menu na stałe, a jeśli będzie taka potrzeba, zrobimy górne wcięcie przy treści, tak aby przy przewijaniu do zera menu nie nachodziło na resztę treści.