CSS, HTML i PHP

„Przyklejony” nagłówek i inne elementy bez JS – wystarczą dwie linijki kodu

Podążający za użytkownikiem przewijającym stronę nagłówek stał się jednym z nieodzownych elementów każej strony internetowej. Użytkownicy lubią mieć możliwość natychmiastowego przejścia do innej sekcji witryny, bez potrzeby przewijania jej na samą górę.

Jak to się robiło kiedyś?

Przyklejające się nagłówki niegdyś tworzyło się poprzez JavaScript, który odczytywał przesunięcie scrolla przez użytkowników, by następnie dodać elementowi (w tym przypadku naszemu nagłówkowi) position:fixed.Metoda ta nadal się sprawdza i wcciąż takie coś działa (w tym przypadku elementowi, który ma się „przyklejać” nadajemy klasę sticky:


var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
 window.scrollY >= origOffsetY ? header.classList.add('sticky') :
 header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);

Powiedzmy jednak sobie szczerze – było to rozwiązanie dość skomplikowane i po prostu niewygodne. Niemniej jednak, stosowano je często, bo przyklejanie nagłówka jest w końcu w modzie.

Nie było to idealne również dla osób, które chciałyby przyklejać kilka rzeczy jednocześnie po dojechaniu do nich – dało się to osiągnąć bardziej skomplikowanym kodem, co jednak mogło poskutkować spadkiem wydajności strony. Teraz już nie musimy się z tym zmagać.

Jak to się robi dziś?

Dziś, dzięki tak zwanemu position:sticky można to osiągnąć. Jedna linijka kodu, a potrafi tyle zdziałać. Argument ten poprzedza skrót przeglądarki, a to, na jakiej wysokości od góry musi znaleźć się element, by się „przykleił” definiuje argument top. Oto przykład:

.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}

W tym przypadku element o klasie .sticky przyklei się do góry naszego ekranu, gdy tylko dojedziemy do 15px od góry.

DEMONSTRACJA

0 polubień