Jak utworzyć stopkę samoprzylepną tylko dla CSS
Zwykle potrzebujemy JavaScript wykonywać efekty przewijania związane z różnymi działaniami użytkownika na stronach internetowych. Skrypt wykonuje zadanie śledzenie, jak daleko przewijanie w górę lub w dół zajmuje strona, i uruchamia akcję gdy osiągnięta zostanie wysokość progowa.
Używanie JavaScript do przewijania efektów nie jest szczególnie złe. W rzeczywistości są bardziej skomplikowane przypadki niemożliwe do rozwiązania bez JavaScript. Jednak są Hacki CSS które mogą zastępować te skrypty czasami.
Ten post pokaże ci how, aby utworzyć efekt odsłonięcia stopki na przewijaniu strony za pomocą CSS. Będziemy używać dwóch przypadków użycia, aby to wykazać: jeden dla całej strony (patrz demo) i jeden dla poszczególnych elementów strony, takich jak artykuły.
Pełna strona
Musimy stworzyć stopkę pojawia się pod stroną podczas gdy użytkownik przewija w dół. Ponadto, gdy przewijają stronę wstecz, stopka musi ukryć się pod stroną ponownie.
Aby osiągnąć ten cel, najpierw musimy stworzyć stopka ze stałą pozycją na dole ekranu.
1. Utwórz stopkę stałą
Chodźmy dodaj trochę treści i stopkę najpierw na stronę. Używam tagów HTML W mojej wersji demonstracyjnej wewnątrz stopki wyświetlany jest obraz nietoperza, aby uzyskać nie tak straszny efekt, ale możesz wybrać dowolny inny obraz, który Ci się podoba. Lorem ipsum dolor sit amet… Przejście do CSS, usuń dowolne miejsce wokół Podaj kilka wymiarów ( Aplikować Pokoloruj oba Ustaw W ten sposób na dole będzie wystarczająco dużo miejsca na stopkę bądź widoczny kiedy użytkownik przewija stronę w dół. to jest to! Stopka ujawnia efekt pełnej strony internetowej. Sprawdź demo Codepen poniżej. Ta technika może być użyta dla pojedynczego elementu HTML (ze stopką) wystarczająco długi dla właściwego efektu przewijania strony. Metoda jest nieco hackiczna, ponieważ obecnie nie działa w Chrome i IE, ale ma przyzwoity spadek. Najpierw stwórzmy długi artykuł ze stopką. Aby promować kod semantyczny, wybrałem Lorem ipsum dolor sit amet… Poniżej możesz zobaczyć podstawowa stylizacja artykułu i stopki. Mój artykuł wygląda obecnie tak. Oczywiście możesz również użyć innych podstawowych zasad stylu. Poprzednia stopka została naprawiona być lepkim. Aplikować The Możesz dostosować jego wartość do swojego gustu, ponieważ określa on punkt, w którym stopka zaczyna pojawiać się lub znikać, gdy użytkownik przewija w dół lub w górę. Dać ta sama wartość dolnego marginesu artykułu, aby na dole było wystarczająco dużo miejsca, aby odsłonić pełną stopkę. Teraz potrzebujemy otwarcie na dole artykułu przez które widzimy przewijaną stopkę w górę iw dół. Aby to osiągnąć, wymień The Wreszcie umieść stopkę za artykułem używając I to wszystko, pojedynczy element strony z efektem odsłonięcia na przewijanie jest zakończony. Sprawdź pióro Codepen poniżej. Oba przypadki użycia można również znaleźć na naszej stronie Github. i dla semantyki. jednak,
Przewijaj, aż zobaczysz stopkę
tag by ustawienie marginesów na 0, i zrobię to wystarczająco długo dodanie niestandardowej wysokości aby wywołać przewijanie (jeśli zawartość treści na stronie jest wystarczająco długa, aby spowodować przewijanie, nie musisz nadawać jej wysokości).szerokość i wysokość) do stopki i naprawić jego pozycję na dole ekranu z pozycja: naprawiona; i bottom: 0; nieruchomości. body font-family: Crimson Text; rozmiar czcionki: 13pt; margines: 0; footer width: 100%; wysokość: 200px; pozycja: naprawiona; bottom: 0; kolor tła: # DD5632;
2. Ukryj stopkę
z-index: -1 rządzić stopką, aby umieść go za wszystkimi innymi elementami na stronie. i tagi białe w celu zakryj stopkę. body, html background-color: #fff; footer width: 100%; wysokość: 200px; pozycja: naprawiona; bottom: 0; kolor tła: # DD5632; z-index: -1;
3. Dostosuj dolny margines
margines dolny z etykietka równa wysokości stopki (w moim przykładzie 200px). ciało wysokość: 1000px; margines: 0; margin-bottom: 200px;
Indywidualne elementy strony
1. Utwórz długi artykuł
i .
artykuł 1
artykuł szerokość: 500px; kolor tła: # FEF9F3; dopełnienie: 20px 40px; article> footer height: 100px; kolor tła: # FE0178; body font-family: kormoran garamond;
2. Spraw, aby stopka była lepka
pozycja: lepki reguła do stopki, więc będzie się poruszać w granicach artykułu, ale nadal utrzymać swoją pozycję na ekranie, gdy użytkownik przewija w górę iw dół. article> footer height: 100px; kolor tła: # FE0178; pozycja: -webkit-sticky; pozycja: lepki; bottom: 80px;
dół: 80px reguła ustala pozycję stopki 80px powyżej dolnej części artykułu. artykuł szerokość: 500px; kolor tła: # FEF9F3; dopełnienie: 20px 40px; margin-bottom: 80px;
3. Dodaj częściowo przezroczyste tło
kolor tła artykułu za pomocą gradient liniowy zdjęcie w tle, który od góry artykułu do góry stopki jest pokolorowane kolorem tła artykułu, a pozostała część na dole jest przezroczyste. artykuł szerokość: 500px; dopełnienie: 20px 40px; background-image: gradient liniowy (do dołu, # FEF9F3 calc (100% - 120px), przezroczysty 0); margin-bottom: 80px;
calc (100% -120px) Funkcja CSS oblicza pełna wysokość artykułu minus stopka. W moim przykładzie jest to 120px (100px dla wysokości + 20px za wypełnienie).
4. Umieść stopkę z powrotem
z-index: -1 Reguła CSS. article> footer height: 100px; kolor tła: # FE0178; pozycja: -webkit-sticky; pozycja: lepki; bottom: 80px; z-index: -1;
