Jak stworzyć przyklejony nagłówek strony internetowej

Nagłówki witryny, które pozostają na miejscu, gdy użytkownik przewija stronę, stały się bardzo popularnym elementem projektu. 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 „przyklejonymi”, ponieważ przyklejają się i pozostają widoczne, gdy użytkownik porusza się po witrynie. Gdy użytkownik po raz pierwszy pojawi się na stronie, elementy będą na swojej pozycji startowej, ale potem 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 dostępną. Posiadanie nawigacji, która pozostaje na swoim miejscu, pozwala użytkownikowi na łatwy przepływ treści podczas poruszania się po zawartości witryny, co jest niezwykle ważne.

„Przyklejone 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 swoim miejscu. Ten element o stałej pozycji jest pozycjonowany względem rzutni lub samego okna przeglądarki. Ponieważ widoczny obszar nie zmienia się podczas przewijania witryny, ten element o stałej pozycji pozostanie w tym samym miejscu, gdy strona jest przewijana.

Uwaga: nie próbuj tego w swojej aktywnej witrynie

Pamiętaj: nigdy nie powinieneś zmieniać kodu bezpośrednio w swojej witrynie, aby upewnić się, że nic się nie zepsuje. Nasza bezpłatna lokalna aplikacja programistyczna Local pomoże Ci skonfigurować środowisko testowe, w którym możesz bezpiecznie śledzić ten samouczek.

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

Sprawianie, że nawigacja jest lepka, nie może być prostsze; to po prostu zrobione ze stylami CSS. Wygląda to mniej więcej tak:

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

Bez względu na to, jak długa jest Twoja strona lub ile razy przewijasz w górę iw dół, nawigacja będzie „uwięziona” na górze strony. Do nawigacji dodano klasę o nazwie .navbar-fixed-top , która tworzy miejsce docelowe nawigacji. Dodałem tę klasę do tagu nawigacyjnego. Pozycja jest ustawiona na stałą, a dodanie lewego i prawego pozycjonowania zapewnia, że ​​rozmieszczenie jest prawidłowe i zajmuje całą szerokość strony.
Pamiętaj, że za każdym razem, gdy ta klasa zostanie zastosowana, utworzy stałą pozycję elementu. Najprawdopodobniej ta klasa zostanie zastosowana tylko raz, w przeciwnym razie wiele elementów strony zachowałoby się w ten sam sposób w tym samym miejscu, tworząc bałagan.

Inną ważną kwestią jest indeks Z. Ponieważ chcemy, aby nawigacja była zawsze widoczna, musimy upewnić się, że nie nakładają się na nią inne elementy. Kiedy odwołujemy się do z-index , mówimy o właściwości CSS, która ustala kolejność określonych elementów na stosie. Element o większej kolejności stosu zawsze znajduje się przed innym elementem o niższej kolejności stosu. Wartość 999 to duża liczba, co sprawia, że ​​jest to bezpieczny zakład dla nawigacji.

Dostosuj treść strony

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

body {

padding-top: 75px;

}

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

Squishy lepkiego nagłówka

Często zdarza się, że nagłówek staje się cieńszy, gdy użytkownik przewinie poza określony punkt, przez co wygląda na zbity. Zmniejszenie rozmiaru nawigacji pomaga dać użytkownikowi więcej miejsca na zobaczenie głównej zawartości witryny. Jest to szczególnie przydatne na mniejszych urządzeniach. Aby to osiągnąć, użyjemy kombinacji CSS i JavaScript.

Squishy nawigacja ze skryptem AnimatedHeader

Aby dodać animowany nagłówek, który zmieni swój rozmiar podczas przewijania, istnieje świetne, lekkie rozwiązanie, które sprawi, że nawigacja będzie delikatna. Nazywa się AnimatedHeader. Posiada licencję MIT, dzięki czemu może być używany do projektów osobistych lub komercyjnych. Aby uzyskać 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 nawigacji przyklejonej. Poniżej widać, że została dodana kolejna klasa, która określa wysokość 75px. To jest rozmiar „zgnieciony”.

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

Aby zmienić rozmiar, JavaScript jest używany do dodania klasy .cpb-af-header-shrink . Przyjrzyjmy się części skryptu, która sprawia, że ​​tak się dzieje:

function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

Przypominam, że w skrypcie jest coś więcej, więc pobierz kod źródłowy, aby mieć wszystkie komponenty. Jak widać, po przewinięciu przez użytkownika określonego punktu 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ługiwanej przeglądarki, dla której projektujesz, position: sticky; sprawia, że ​​tworzenie przyklejonego nagłówka jest bardzo proste. Obsługa przeglądarek nie jest straszna, ale nie jest też w pełni globalna. Kiedy masz zadeklarowany sticky, mogą być użyte przedrostki. Sprawdź Czy mogę użyć, aby uzyskać więcej informacji.

Prostym sposobem opisania pozycjonowania przyklejonego jest to, że jest to połączenie pozycjonowania względnego i stałego. Domyślam się, że często spotykasz się z lepkim pozycjonowaniem. Mówimy tutaj o nagłówkach, ale jest to również przydatne dla każdego elementu interfejsu użytkownika, który ma być „przyklejony” podczas przewijania przez użytkowników. Widzą, że „utknie” go, 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 „naprawiany”. Ten punkt jest deklarowany za pomocą CSS. „Punkt” jest zasadniczo wtedy, gdy określasz górę, dół, lewo lub prawo, tak jak w przypadku pozycjonowania bezwzględnego. Musisz określić, aby element miał się do czego „przykleić”.

Korzystanie z pozycji: lepkie

Jest całkiem prosty w użyciu. Kilka deklaracji CSS i udało mi się mieć lepki nagłówek. Oto trzy proste kroki:

1. Znajdź odpowiedni styl, aby zadeklarować element jako przyklejony za pomocą position:sticky; (nie zapomnij o prefiksach przeglądarki, takich jak position: -webkit-sticky; ).
2. Wybierz „przyklejoną krawędź” (górną, prawą, dolną lub lewą), do której element ma się „przykleić”.
3. Zadeklaruj odległość od „lepkiej krawędzi”, tj. 10px dla nagłówka, który staje się lepki, gdy jest oddalony o 10px od obszaru przewijania.

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

Sytuacje lepkiego przepełnienia, o których należy pamiętać

Kompatybilność przepełnienia

To świetnie, ale nie jest idealne. Istnieją pewne ograniczenia. Przepełnienie może czasami być trochę nieprzewidywalne. Najlepiej jest unikać pewnych typów przepełnienia elementu nadrzędnego z czymś, 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 można skorzystać z reguły supports w celu wykrycia, czy bieżąca przeglądarka obsługuje przyklejone pozycjonowanie. To wygląda jak:

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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

Na pierwszy rzut oka może się to wydawać skomplikowane, ale nie ma powodu, aby tkwić w koleinie nawigacyjnej; stosunkowo łatwo jest sprawić, by nawigacja była lepka i gąbczasta. Dzięki prostemu, stałemu pozycjonowaniu CSS możesz łatwo utworzyć przyklejony nagłówek witryny. Za pomocą prostego JavaScriptu stałą nawigację można ulepszyć, ściskają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 przyklejony nagłówek witryny, gdy Twoja witryna jest dostępna lokalnie! Dowiedz się więcej i pobierz za darmo tutaj!

Ten artykuł został pierwotnie opublikowany 2 lutego 2016 r. Ostatnia aktualizacja miała miejsce 14 października 2018 r.