Hoe CSS-only Sticky Footer te maken
Normaal hebben we JavaScript nodig scroll-effecten uitvoeren gerelateerd aan verschillende gebruikersacties op webpagina's. Het script doet het werk bijhouden hoe ver op of neer scrollen een pagina neemt, en triggert een actie wanneer een drempelhoogte is bereikt.
Het is niet bijzonder slecht om JavaScript te gebruiken voor scrolleffecten. In feite zijn er meer gecompliceerde gevallen onmogelijk om op te lossen zonder JavaScript. Er zijn echter CSS-hacks die deze scripts soms kan vervangen.
Dit bericht laat je zien how om footer te maken, onthult effecten op pagina scrollen met behulp van CSS. We zullen twee use-cases gebruiken om dit aan te tonen: één voor de hele pagina (zie demo) & één voor individuele pagina-elementen, zoals artikelen.
Volledige pagina
We moeten een voettekst maken die verschijnt onder de pagina terwijl de gebruiker naar beneden scrolt. Ook wanneer ze scrollen van de pagina een back-up van de voettekst nodig heeft verborgen zijn onder de pagina opnieuw.
Om dit doel te bereiken, moeten we eerst een voettekst met vaste positie onderaan het scherm.
1. Maak een vaste voettekst
Laten we voeg wat inhoud en een voettekst toe naar de eerste pagina. Ik gebruik de HTML-tags In mijn demo staat een vleermuisafbeelding in het voetgedeelte voor een niet zo spookachtig effect, maar je kunt elke andere afbeelding kiezen die je leuk vindt. Lorem ipsum dolor sit amet… Verhuizen naar CSS, verwijder elke spatie rond de Geef enkele dimensies ( Pas de Kleur beide Stel de Op deze manier is er voldoende ruimte onderaan voor de voettekst zichtbaar zijn wanneer de gebruiker naar beneden scrolt op de pagina. Dat is het. Het voetteklijkende effect voor een volledige webpagina is voltooid. Bekijk de demo van Codepen hieronder. Deze techniek kan worden gebruikt voor een individueel HTML-element (met een voettekst) dat is lang genoeg voor een juiste pagina scrollen effect. De methode is een beetje hacky, omdat het op dit moment niet werkt in Chrome en IE, maar het heeft een goede terugval. Laten we eerst een lang artikel met een voettekst maken. Om semantische code te bevorderen, heb ik gekozen Lorem ipsum dolor sit amet… Hieronder ziet u de basisstyling van het artikel en de voettekst. Mijn artikel ziet er momenteel zo uit. Natuurlijk kunt u ook andere basisstijlregels gebruiken. De vorige voettekst is hersteld, deze gaat kleverig zijn. Pas de De U kunt de waarde naar uw smaak aanpassen, omdat deze het punt bepaalt waar de voettekst begint te verschijnen of verdwijnt terwijl de gebruiker naar beneden of naar boven scrolt. Geef de dezelfde waarde voor de onderste marge van het artikel, zodat er voldoende ruimte onderaan is om het volledige voettekst te onthullen. Nu hebben we nodig een opening naast de onderkant van het artikel waardoor we het kleverige voettekstje naar beneden kunnen zien scrollen. Om dit te bereiken, vervangt u de De Eindelijk, laten we plaats de voettekst achter het artikel de ... gebruiken En dat is het, het individuele pagina-element met het on-scroll onthullende effect is voltooid. Bekijk hieronder de pen van Codepen. U kunt beide use-cases ook vinden op onze Github-pagina. en voor semantiek. Echter,
Blijf scrollen totdat je de voettekst ziet
tag door marges instellen op 0, en maak het lang genoeg door een aangepaste hoogte toevoegen om scrollen te induceren (als de body-inhoud op uw pagina lang genoeg is om scrollen te veroorzaken, hoeft u deze geen hoogte te geven).breedte en hoogte) naar het voettekstje, en fix zijn positie naar de onderkant van het scherm met de positie: vast; en onderkant: 0; eigenschappen. body font-family: Crimson Text; font-size: 13pt; marge: 0; footer width: 100%; hoogte: 200 px; positie: vast; onderkant: 0; achtergrondkleur: # DD5632;
2. Verberg de voettekst
z-index: -1 regel aan de voettekst om plaats het achter alle andere elementen op de pagina. en tags wit om bedek de voettekst. body, html background-color: #fff; footer width: 100%; hoogte: 200 px; positie: vast; onderkant: 0; achtergrondkleur: # DD5632; z-index: -1;
3. Pas de onderste marge aan
margin-bottom van de label gelijk aan de hoogte van de voettekst (in mijn voorbeeld 200px). lichaam hoogte: 1000 px; marge: 0; margin-bottom: 200px;
Individuele pagina-elementen
1. Maak een lang artikel
en .
Artikel 1
artikel width: 500px; background-color: # FEF9F3; opvulling: 20px 40px; artikel> footer height: 100px; achtergrondkleur: # FE0178; body font-family: aalscholver garamond;
2. Maak de voettekst kleverig
positie: sticky regel aan het voettekst, dus het zal binnen de grenzen van het artikel komen maar nog steeds behoud zijn positie op het scherm terwijl de gebruiker op en neer scrolt. artikel> footer height: 100px; achtergrondkleur: # FE0178; positie: -webkit-plakkerig; positie: kleverig; onderkant: 80px;
bottom: 80px regel corrigeert de positie van de voettekst 80 px boven de onderkant van het artikel. artikel width: 500px; background-color: # FEF9F3; opvulling: 20px 40px; margin-bottom: 80px;
3. Voeg een gedeeltelijk transparante achtergrond toe
Achtergrond kleur van het artikel met een lineair verloop achtergrond afbeelding, die van de bovenkant van het artikel naar de bovenkant van het voettekstje is gekleurd met de achtergrondkleur van het artikel, en het resterende deel naar de bodem is transparant gemaakt. artikel width: 500px; opvulling: 20px 40px; achtergrondafbeelding: lineair verloop (naar beneden, # FEF9F3 calc (100% - 120px), transparant 0); margin-bottom: 80px;
berekend (100% -120px) CSS-functie berekent de volledige hoogte van het artikel minus de voettekst. In mijn voorbeeld is het 120 px (100 px voor hoogte + 20px voor opvulling).
4. Plaats de voettekst terug
z-index: -1 CSS-regel. artikel> footer height: 100px; achtergrondkleur: # FE0178; positie: -webkit-plakkerig; positie: kleverig; onderkant: 80px; z-index: -1;
