Sticky JS – jak sprawić, by elementy zostawały na miejscu?

Tworzenie nowoczesnych stron internetowych często wymaga stosowania efektu „przyklejonych” elementów, takich jak nagłówki, paski nawigacyjne czy przyciski akcji. Właśnie do tego służy sticky js, czyli JavaScript pozwalający na dynamiczne blokowanie elementów w określonej pozycji ekranu. W tym artykule dowiesz się, jak działa sticky js i poznasz konkretne przykłady jego zastosowania.

Co to jest sticky js?

Sticky JS to podejście oparte na JavaScript, które pozwala na utrzymanie wybranych elementów na ekranie podczas przewijania strony. W przeciwieństwie do zwykłego CSS position: sticky, który działa tylko w określonych warunkach, sticky js daje pełną kontrolę nad zachowaniem elementów.

Dlaczego warto używać sticky js?

Istnieje kilka powodów, dla których warto używać sticky js:

• Kompatybilność – nie wszystkie przeglądarki w pełni obsługują position: sticky, a JavaScript pozwala na obejście tych ograniczeń.
• Większa kontrola – możesz określić dokładne momenty aktywacji i dezaktywacji efektu.
• Interaktywność – sticky js może reagować na inne zdarzenia użytkownika, np. kliknięcia czy zmiany rozmiaru okna.

sticky js przykłady – jak go zaimplementować?

1. Prosty sticky navbar

Najczęstszym zastosowaniem sticky js jest „przyklejony” pasek nawigacyjny, który pozostaje widoczny podczas przewijania.

window.addEventListener('scroll', function() {
    let navbar = document.getElementById('navbar');
    if (window.pageYOffset > 100) {
        navbar.classList.add('sticky');
    } else {
        navbar.classList.remove('sticky');
    }
});

W CSS należy dodać klasę:

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.3s;
}

2. Sticky przycisk „na górę”

Innym przydatnym elementem jest przycisk „powrót na górę”, który pojawia się po przewinięciu strony.

let button = document.getElementById('scrollTop');

window.addEventListener('scroll', function() {
    if (window.pageYOffset > 300) {
        button.style.display = 'block';
    } else {
        button.style.display = 'none';
    }
});

button.addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

W HTML:

↑

3. Sticky sidebar – boczny panel

Sticky js świetnie sprawdza się również w przypadku bocznych paneli, np. menu lub reklam.

window.addEventListener('scroll', function() {
    let sidebar = document.getElementById('sidebar');
    let offset = 200; // wysokość, po której sidebar staje się sticky

    if (window.pageYOffset > offset) {
        sidebar.style.position = 'fixed';
        sidebar.style.top = '10px';
    } else {
        sidebar.style.position = 'relative';
    }
});

Podsumowanie

Sticky JS to świetne rozwiązanie do poprawy UX na stronie. Dzięki niemu możesz sprawić, że nawigacja, przyciski czy sidebar będą bardziej intuicyjne i funkcjonalne. Jak widzisz na powyższych przykładach, implementacja nie jest trudna, a efekty mogą znacznie podnieść jakość interakcji użytkownika z Twoją stroną!