Pozycjonowanie Sticky w CSS3

By /

CSS

Pozycjonowanie sticky w CSS3 jest hybrydą pomiędzy relative a fixed pozycjonowaniem. Element z pozycją sticky zachowuje się jak element relative w normalnym strumieniu dokumentu, dopóki nie osiągnie określonego punktu podczas przewijania, w którym to staje się fixed i “przykleja” się do określonego miejsca na ekranie.

Kluczowe cechy pozycji sticky:

  • Element zaczyna się “przyklejać” tylko wtedy, gdy osiągnie określony punkt przy przewijaniu – na przykład przykleja się do górnej części viewportu.
  • Wymaga zdefiniowania top, right, bottom lub left, aby wskazać, kiedy element ma stać się “sticky”.
  • Pozostaje częścią normalnego flow dokumentu do momentu “przyklejenia”.

Przykład użycia pozycji sticky:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pozycjonowanie Sticky w CSS3</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        .sticky-header {
            position: -webkit-sticky; /* Dla Safari */
            position: sticky;
            top: 0;
            background-color: lightblue;
            padding: 10px 0;
            margin: 0;
            border-bottom: 2px solid darkblue;
            z-index: 1000; /* Upewnij się, że nagłówek 
                              jest na wierzchu */
        }
        
        .content {
            padding: 15px;
            height: 2000px; /* Długa zawartość, aby 
                               umożliwić przewijanie */
        }
    </style>
</head>
<body>

    <header class="sticky-header">Jestem Sticky Header</header>
    <div class="content">
        Przewiń, aby zobaczyć działanie sticky header.
    </div>

</body>
</html>

W tym przykładzie, .sticky-header zachowuje się jak normalny element, aż do momentu przewinięcia strony do góry. W tym momencie “przykleja” się do górnej części viewportu i pozostaje widoczny na ekranie podczas dalszego przewijania treści.

Kiedy używać pozycji sticky:

  • Dla elementów nawigacyjnych lub kontrolek, które powinny być łatwo dostępne przez użytkownika, ale bez konieczności stałego zajmowania miejsca na ekranie (np. menu nawigacyjne, filtry).
  • W tabelach danych, aby nagłówki kolumn pozostały widoczne podczas przewijania treści.

Podsumowanie:

Pozycjonowanie sticky oferuje unikalną możliwość tworzenia interfejsów użytkownika, które są zarówno dynamiczne, jak i funkcjonalne. Pozwala na “przyklejanie” elementów do określonych miejsc na ekranie w zależności od przewijania, co zwiększa użyteczność i dostępność ważnych elementów interfejsu. Warto jednak pamiętać o odpowiednim stosowaniu tej techniki, aby nie zakłócać doświadczeń użytkowników podczas interakcji ze stroną.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top