Hur man skapar ett Sticky Element i HTML

Den här bloggen kommer att diskutera CSS-positionsegenskapen och metoden för att skapa ett sticky element i HTML.

Vad är CSS position Property?

CSS position-egenskapen anger positioneringsmetoden för HTML-element, som kan vara en absolut, klibbig, statistisk, fixerad, ärvd, relativ eller initial.

Syntax

Syntaxen ovan visar att positionsegenskapen har olika värden. De kan tilldelas därefter.

Låt oss nu kolla in proceduren för att skapa klibbiga element i HTML.

Vad är CSS position: sticky?

HTML-elementet med en ' klibbig ” position har en relativ position tills den når en punkt och fungerar sedan som ett klibbigt element.

Låt oss gå igenom det enkla exemplet för att förstå konceptet med CSS-klibbig position.

Exempel: Hur skapar man ett Sticky Element i HTML?
I HTML-filen lägger du till

för rubriken,

för stycket och

med klassnamnet ' klibbig ”. Lägg sedan till en

-tagg som har kapslad ordnad lista

med en lista
1. .

   Notera : Vi har tagit en lång lista så att du när du rullar på vår sida kan observera beteendet hos det klibbiga elementet.

   HTML

   < h2 > Sticky Notes: Se effekten av Sticky Element < / h2 >
   < sid > position: klibbig < / sid >
   < div klass = 'klibbig' > Det här är min att-göra-lista! < / div >
   < sid >
   < ol >
   < den där > Ring Manager < / den där >
   < den där > Möte med anställda < / den där >
   < den där > Skicka in rapport < / den där >
   < den där > Gå till doktorn < / den där >
   < den där > Boka ett flyg < / den där >
   < den där > Gå på en promenad. < / den där >
   < den där > Gå till mataffären. < / den där >
   < den där > Titta på tv < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < den där > Lite text. < / den där >
   < / ol >
   < / sid >

   Därefter kommer vi att ge stil till div som heter sticky:

   • Här, ' .klibbig ” representerar klassen där stilegenskaperna måste tillämpas.
   • Inom de lockiga parenteserna kommer vi att tilldela ' placera ' fastighetsvärde som ' klibbig ”.
   • den ' topp ' är inställd som ' 0 ”.
   • den ' bakgrundsfärg ' är ' #00154f ”.
   • Ge lite ' stoppning ' till div genom att ställa in dess värde som ' 40px ”.
   • ' textstorlek ' som ' 30 pixlar ”.
   • ' Färg ' av teckensnitt är inställd som ' vit ”.

   CSS

   .klibbig {
   placera : klibbig ;
   topp : 0 ;
   bakgrundsfärg : #00154f ;
   stoppning : 40px ;
   textstorlek : 30 pixlar ;
   Färg : vit ;
   }

   Spara HTML-filen och öppna den i webbläsaren för att se resultatet:

   

   Bonustips

   Genom att använda ' hsla() ”-metoden kan du ställa in en transparent bakgrund för det tillagda klibbiga elementet enligt följande:

   bakgrund - Färg : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   Produktion

   

   Så här håller elementet fast vid den specifika positionen genom att ställa in CSS ' placera ' fastighetsvärde som ' klibbig ”.

   Slutsats

   den ' klibbig ” position i CSS, gör att elementpositionen växlar mellan relativ och fix. Som ett resultat placeras det tillagda klibbiga elementet i förhållande till rullningen tills det når en viss punkt när det beter sig som en klibbig. Du kan också justera transparensnivån för det tillagda klibbiga elementet genom att använda metoden hsla(). Den här bloggen guidade dig om att göra enkla och klibbiga transparenta element.