Jak stworzyć lepki nagłówek strony internetowej

Nagłówki stron internetowych, które pozostają na swoim miejscu, gdy użytkownik przewija stronę, stały się bardzo popularnym elementem projektowania. Pozwalają użytkownikowi na łatwy dostęp do nawigacji bez konieczności przewijania w górę za każdym razem, gdy chce wybrać inną stronę lub opcję.

Elementy z tą funkcjonalnością są często nazywane „lepkimi”, ponieważ przyklejają się do użytkownika, pozostając widocznym podczas poruszania się po witrynie. Gdy użytkownik po raz pierwszy trafi na stronę, elementy będą w pozycji wyjściowej, ale wtedy przyklejony nagłówek pozostanie w tym samym miejscu.

Ponieważ nawigacja jest jednym z najważniejszych elementów strony internetowej, takie podejście pomaga uczynić nawigację bardziej przystępną. Posiadanie nawigacji, która pozostaje na swoim miejscu, pozwala użytkownikowi na łatwe poruszanie się po zawartości witryny, co jest niezwykle ważne.

Lepkie elementy nawigacyjne pomagają stworzyć łatwy przepływ użytkowników, gdy ludzie poruszają się po Twojej witrynie.

Co sprawia, że ​​jest lepki?

Stałe pozycjonowanie jest kluczowym elementem, dzięki któremu nawigacja pozostaje na miejscu. Ten element o stałej pozycji jest umieszczony względem widocznego obszaru lub samego okna przeglądarki. Ponieważ rzutnia nie zmienia się podczas przewijania witryny, ten stały element pozostanie w tym samym miejscu podczas przewijania strony.

Uwaga: nie próbuj tego w swojej aktywnej witrynie

Pamiętaj: Nigdy nie zmieniaj kodu bezpośrednio w swojej aktywnej witrynie, aby mieć pewność, że nic się nie zepsuje. Nasza bezpłatna aplikacja do programowania lokalnego, Local, pomoże Ci skonfigurować środowisko testowe, w którym możesz bezpiecznie postępować zgodnie z tym samouczkiem.

Jak sprawić, by nawigacja pozostawała w jednym miejscu?

Sprawienie, by nawigacja była lepka, nie może być łatwiejsze; jest to po prostu zrobione za pomocą stylów CSS. Zasadniczo wygląda to mniej więcej tak:

 [css]

.navbar-fixed-top {

pozycja: stała;

po prawej: 0;

lewy: 0;

indeks z: 999;

}

[/css]

Bez względu na to, jak długa jest Twoja strona lub ile razy przewijasz w górę iw dół, nawigacja „przyklei się” na górze strony. Do nawigacji dodano klasę o nazwie .navbar-fixed-top , która tworzy miejsce docelowe dla nawigacji. Dodałem tę klasę do znacznika nav. Pozycja jest ustawiona jako stała, a dodanie lewego i prawego pozycjonowania zapewnia prawidłowe umieszczenie i zajmuje całą szerokość strony.

Pamiętaj, że za każdym razem, gdy ta klasa zostanie zastosowana, utworzy ona stałą pozycję elementu. Najprawdopodobniej ta klasa zostanie zastosowana tylko raz, w przeciwnym razie wiele elementów strony zachowywałoby się w ten sam sposób w tym samym miejscu, tworząc bałagan.

Innym ważnym czynnikiem jest indeks Z. Ponieważ chcemy, aby nawigacja była zawsze widoczna, musimy zadbać o to, aby nie była zasłaniana przez inne elementy. Kiedy odwołujemy się do z-index , mówimy o właściwości CSS, która ustawia kolejność stosu określonych elementów. Element o wyższym porządku stosu zawsze znajduje się przed innym elementem o niższym porządku stosu. Wartość 999 to duża liczba, co czyni ją bezpieczną dla nawigacji.

Dopasuj treść strony

Ponieważ nawigacja znajduje się teraz w stałej pozycji, obejmie część treści u góry. Jest na to prosta poprawka. Dodanie dopełnienia na górze treści spowoduje przesunięcie strony w dół, dzięki czemu zawartość u góry nie będzie zakryta przez nagłówek, gdy użytkownik dotrze na stronę.
Możesz dodać dopełnienie do treści w pliku CSS:

 [css]

ciało {

wyściółka górna: 75px;

}

[/css]

Pamiętaj, że wyściółka może być większa lub mniejsza w zależności od grubości stałego nagłówka.

Robienie lepkiego nagłówka Squishy

Często zdarza się, że nagłówek staje się cieńszy, gdy użytkownik przewinie poza określony punkt, przez co wygląda na gąbczasty. Kiedy nawigacja zmniejsza się, pomaga dać użytkownikowi więcej miejsca, aby zobaczyć główną zawartość witryny. Jest to szczególnie przydatne w przypadku mniejszych urządzeń. Aby to osiągnąć, użyjemy kombinacji CSS i JavaScript.

Squishy Nawigacja ze skryptem AnimatedHeader

Aby dodać animowany nagłówek, który zmienia swój rozmiar podczas przewijania, istnieje świetne, lekkie rozwiązanie, które sprawi, że nawigacja będzie miękka. Nazywa się AnimatedHeader. Posiada licencję MIT, więc może być używany do projektów osobistych lub komercyjnych. Aby pobrać te pliki, sprawdź AnimatedHeader na GitHub.

Podstawowy CSS do nawigacji

Przyjrzyjmy się dwóm ważnym stylom CSS. Pierwszy prawdopodobnie wygląda znajomo, .navbar-fixed-top , który określa naszą wysokość, szerokość i stałą pozycję dla lepkiej nawigacji. Poniżej widać, że dodano kolejną klasę, która określa wysokość 75 pikseli. Jest to rozmiar „zgnieciony”.

 [css]

.navbar-fixed-top {
pozycja: stała;
góra: 0;
lewy: 0;
szerokość: 100%;
tło: #f6f6f6;
indeks z: 999;
wysokość: 90px;
przelew: ukryty;
-webkit-przejście: wysokość 0,3s;
-moz-przejście: wysokość 0,3s;
przejście: wysokość 0,3 s;
}

.navbar-fixed-top.cbp-af-header-shrink {
wysokość: 75px;
}

[/css]

Aby zmienić rozmiar, JavaScript dodaje klasę .cpb-af-header-shrink . Przyjrzyjmy się części skryptu, która to powoduje:

 [javascript]

funkcja scrollPage() {
var sy = przewińY();
if ( sy >= changeHeaderOn ) {
classie.add(nagłówek, 'cbp-af-header-shrink');
}
w przeciwnym razie {
classie.remove( nagłówek, 'cbp-af-header-shrink');
}
didScroll = fałsz;
}

[/javascript]

Tylko przypomnienie, skrypt to coś więcej, więc pamiętaj o pobraniu kodu źródłowego, aby mieć wszystkie komponenty. Jak widać, po przewinięciu przez użytkownika poza określony punkt, dodawana jest klasa .cpb-af-header-shrink . Jeśli użytkownik przewinie stronę w górę, ta klasa zostanie usunięta.

Opcja przyklejonego pozycjonowania CSS

Istnieje również opcja, która może być mniej kłopotliwa. W zależności od obsługi przeglądarki, dla której projektujesz, position: sticky; sprawia, że ​​tworzenie lepkiego nagłówka jest bardzo proste. Obsługa przeglądarek nie jest straszna, ale nie jest też w pełni globalna. Gdy zadeklarowałeś lepkość, można użyć prefiksów. Sprawdź Czy mogę użyć, aby uzyskać więcej informacji.

Prostym sposobem opisania lepkiego pozycjonowania jest połączenie pozycjonowania względnego i stałego. Zgaduję, że dość często spotykasz się z lepkim pozycjonowaniem. Mówimy tutaj o nagłówkach, ale jest to również przydatne w przypadku każdego elementu interfejsu użytkownika, który ma być „lepki” podczas przewijania przez użytkowników. Widzą, jak „zablokował się”, gdy element znajdzie się na określoną odległość od krawędzi rzutni.

Element jest traktowany jako pozycjonowany względnie, dopóki nie trafi w określony punkt, a następnie jest „unieruchomiony”. Ten punkt jest deklarowany za pomocą CSS. „Punkt” polega zasadniczo na określeniu góry, dołu, lewej lub prawej strony, tak jak w przypadku pozycjonowania bezwzględnego. Musisz określić, aby element miał się do czego „przyklejać”.

Korzystanie z pozycji: Lepki

Jest całkiem prosty w użyciu. Kilka deklaracji CSS i mogłem mieć lepki nagłówek. Oto trzy proste kroki:

1. Znajdź odpowiedni styl, aby móc zadeklarować element jako lepki, używając position:sticky; (nie zapomnij o prefiksach przeglądarki, takich jak position: -webkit-sticky; ).
2. Wybierz „lepką krawędź” (górną, prawą, dolną lub lewą), do której element ma się „przyklejać”.
3. Zadeklaruj odległość od „lepkiej krawędzi”, czyli 10px dla nagłówka, który staje się lepki, gdy znajdzie się 10px od obszaru przewijania.

 [css]

.navbar-fixed-top {
  pozycja: -webkit-lepki;
  pozycja: lepka;
  góra: 0;
}

[/css] 

Nie chciałem żadnej przestrzeni między lepkim nagłówkiem a widocznym obszarem, więc jest to 0 pikseli od góry. Możesz zobaczyć ten przykład na Codepen.

Bądź świadomy tych lepkich sytuacji przepełnienia

Zgodność z przepełnieniem

Jest super, ale nie jest idealnie. Istnieją pewne ograniczenia. Przepełnienie może czasem być trochę nieprzewidywalne. Najlepiej trzymać się z dala od pewnych typów przepełnienia elementu nadrzędnego, używając czegoś, co wymaga position: sticky . Mogą występować problemy z automatycznym przepełnieniem, przewijaniem lub ukrywaniem.

Ograniczona obsługa przeglądarek

Obsługa przeglądarek jest ograniczona, więc użycie reguły supports do wykrycia, czy bieżąca przeglądarka obsługuje stałe pozycjonowanie, jest opcją. To wygląda jak:

 [css]

@supports(pozycja:lepki){
  .nagłówek{
    pozycja: -webkit-lepki;
    pozycja: lepka;
    góra: 0;
  }
}

[/css]

Ważne jest, aby zastanowić się, czy lepkie pozycjonowanie jest absolutnie konieczne. Jeśli tak, można zastosować metodę stałego pozycjonowania. Jeśli nie jest to absolutnie konieczne lub obsługa przeglądarki nie jest problemem, podejście lepkie jest łatwiejsze do wdrożenia.

Na pierwszy rzut oka może się to wydawać skomplikowane, ale nie ma powodu, by utknąć w koleinach nawigacyjnych; stosunkowo łatwo jest sprawić, by nawigacja była lepka i miękka. Dzięki prostemu stałemu pozycjonowaniu CSS możesz łatwo stworzyć lepki nagłówek strony internetowej. Za pomocą prostego kodu JavaScript stałą nawigację można ulepszyć, zmniejszając ją do mniejszej wysokości, dając użytkownikom więcej miejsca na przeglądanie zawartości witryny.

Nie próbuj tego na swojej aktywnej stronie

Utwórz lepki nagłówek strony internetowej dla witryn hostowanych przez WP Engine na poziomie lokalnym! Dowiedz się więcej i pobierz za darmo tutaj!