Jak vytvořit Sticky Element v HTML

Tento blog bude diskutovat o vlastnosti CSS position a metodě vytvoření sticky elementu v HTML.

Co je vlastnost pozice CSS?

Vlastnost CSS position určuje metodu umístění prvků HTML, která může být absolutní, lepkavá, statistická, pevná, zděděná, relativní nebo počáteční.

Syntax

Výše uvedená syntaxe ukazuje, že vlastnost position má různé hodnoty. Podle toho je lze přiřadit.

Nyní se podívejme na postup vytváření lepivých prvků v HTML.

Co je pozice CSS: sticky?

Element HTML s „ lepkavý ” pozice má relativní polohu, dokud nedosáhne bodu a poté se chová jako lepivý prvek.

Pojďme si projít jednoduchý příklad, abychom porozuměli konceptu CSS sticky position.

Příklad: Jak vytvořit Sticky Element v HTML?
V souboru HTML přidejte

pro nadpis,

pro odstavec a

s názvem třídy “ lepkavý “. Poté přidejte značku

s vnořeným uspořádaným seznamem

se seznamem
1. .

   Poznámka : Vzali jsme dlouhý seznam, takže při rolování naší stránky můžete pozorovat chování lepivého prvku.

   HTML

   < h2 > Sticky Notes: Podívejte se na efekt Sticky Element < / h2 >
   < p > pozice: lepkavý < / p >
   < div třída = 'lepkavý' > Toto je můj seznam úkolů! < / div >
   < p >
   < ol >
   < že > Správce hovorů < / že >
   < že > Setkání se zaměstnanci < / že >
   < že > Odeslat zprávu < / že >
   < že > Jdi k doktorovi < / že >
   < že > Zarezervujte si let < / že >
   < že > Jít na procházku. < / že >
   < že > Jděte do obchodu s potravinami. < / že >
   < že > Sledovat televizi < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < že > Nějaký text. < / že >
   < / ol >
   < / p >

   Dále poskytneme styl div s názvem sticky:

   • Tady, ' .lepkavý ” představuje třídu, ve které je třeba použít vlastnosti stylu.
   • Uvnitř složených závorek přiřadíme „ pozice 'hodnota nemovitosti jako' lepkavý “.
   • ' horní “ je nastaveno jako “ 0 “.
   • ' barva pozadí ' je ' #00154f “.
   • Dejte trochu' vycpávka ” na div nastavením jeho hodnoty jako “ 40 pixelů “.
   • “ velikost písma ' tak jako ' 30 pixelů “.
   • “ barva “ z písem je nastaveno jako “ bílý “.

   CSS

   .lepkavý {
   pozice : lepkavý ;
   horní : 0 ;
   barva pozadí : #00154f ;
   vycpávka : 40 pixelů ;
   velikost písma : 30 pixelů ;
   barva : bílý ;
   }

   Uložte soubor HTML a otevřete jej v prohlížeči, abyste viděli výstup:

   

   Bonusový tip

   Pomocí „ hsla() ” můžete nastavit průhledné pozadí pro přidaný lepivý prvek následovně:

   Pozadí - barva : hsla ( 0 , 100 %, 90 %, 0,8 ) ;

   Výstup

   

   Takto se prvek přilepí na konkrétní pozici nastavením CSS “ pozice 'hodnota nemovitosti jako' lepkavý “.

   Závěr

   ' lepkavý ” pozice v CSS umožňuje přepínání pozice prvku mezi relativní a pevnou. Výsledkem je, že přidaný lepivý prvek je umístěn vzhledem ke svitku, dokud nedosáhne určitého bodu, kdy se chová jako lepivý. Úroveň průhlednosti přidaného lepivého prvku můžete také upravit pomocí metody hsla(). Tento blog vás provedl vytvářením jednoduchých a lepivých průhledných prvků.