Sådan opretter du et Sticky Element i HTML

Denne blog vil diskutere CSS-positionsegenskaben og metoden til at skabe et sticky element i HTML.

Hvad er CSS position Property?

CSS-positionsegenskaben angiver positioneringsmetoden for HTML-elementer, som kan være en absolut, sticky, statistisk, fast, nedarvet, relativ eller initial.

Syntaks

Syntaksen ovenfor viser, at positionsegenskaben har forskellige værdier. De kan tildeles i overensstemmelse hermed.

Lad os nu tjekke proceduren for at skabe klæbrige elementer i HTML.

Hvad er CSS position: sticky?

HTML-elementet med et ' klæbrig ” position har en relativ position, indtil den når et punkt og fungerer derefter som et klæbrigt element.

Lad os gennemgå det enkle eksempel for at forstå konceptet med CSS-klæbende position.

Eksempel: Hvordan opretter man et Sticky Element i HTML?
I HTML-filen skal du tilføje

for overskriften,

for afsnittet og

med klassenavnet ' klæbrig ”. Tilføj derefter et

-tag med indlejret ordnet liste

med en liste
1. .

   Bemærk : Vi har taget en lang liste, så du, når du ruller på vores side, kan observere adfærden af ​​det klæbrige element.

   HTML

   < h2 > Sticky Notes: Se effekten af ​​Sticky Element < / h2 >
   < s > stilling: klæbrig < / s >
   < div klasse = 'klæbrig' > Dette er min to-do liste! < / div >
   < s >
   < ol >
   < at > Call Manager < / at >
   < at > Møde med medarbejdere < / at >
   < at > Indsend rapport < / at >
   < at > Gå til lægen < / at >
   < at > Bestil en flybillet < / at >
   < at > Gå en tur. < / at >
   < at > Gå til købmand. < / at >
   < at > Se tv < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < at > Noget tekst. < / at >
   < / ol >
   < / s >

   Dernæst vil vi give stil til den div, der hedder sticky:

   • Her, ' .klæbrig ” repræsenterer den klasse, hvor stilegenskaberne skal anvendes.
   • Inden for de krøllede parenteser vil vi tildele ' position ' ejendomsværdi som ' klæbrig ”.
   • Det ' top ' er sat som ' 0 ”.
   • Det ' baggrundsfarve ' er ' #00154f ”.
   • Giv nogle' polstring ' til div ved at indstille dens værdi som ' 40 px ”.
   • “ skriftstørrelse ' som ' 30 px ”.
   • “ farve ' af skrifttyper er indstillet som ' hvid ”.

   CSS

   .klæbrig {
   position : klæbrig ;
   top : 0 ;
   baggrundsfarve : #00154f ;
   polstring : 40 px ;
   skriftstørrelse : 30 px ;
   farve : hvid ;
   }

   Gem HTML-filen og åbn den i browseren for at se outputtet:

   

   Bonus tip

   Ved at bruge ' hsla() ”-metoden, kan du indstille en gennemsigtig baggrund for det tilføjede klæbrige element som følger:

   baggrund - farve : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   Produktion

   

   Sådan holder elementet sig til den specifikke position ved at indstille CSS ' position ' ejendomsværdi som ' klæbrig ”.

   Konklusion

   Det ' klæbrig ” position i CSS, får elementpositionen til at skifte mellem relativ og fast. Som et resultat placeres det tilføjede klæbrige element i forhold til rullen, indtil det når et bestemt punkt, når det opfører sig som en klæbrig. Du kan også justere gennemsigtighedsniveauet for det tilføjede klæbrige element ved at bruge hsla()-metoden. Denne blog guidede dig til at lave enkle og klæbrige gennemsigtige elementer.