CSSతో స్టిక్కీ హెడర్‌ను ఎలా నిర్మించాలి

మీలాంటి పాఠకులు MUOకి మద్దతు ఇవ్వడానికి సహాయం చేస్తారు. మీరు మా సైట్‌లోని లింక్‌లను ఉపయోగించి కొనుగోలు చేసినప్పుడు, మేము అనుబంధ కమీషన్‌ను సంపాదించవచ్చు. ఇంకా చదవండి.

వెబ్ డిజైన్‌లో, స్టిక్కీ హెడర్ అనేది వినియోగదారు అనుభవాన్ని మరియు నావిగేషన్‌ను మెరుగుపరిచే శక్తివంతమైన సాధనం. వినియోగదారులు వెబ్‌పేజీని క్రిందికి స్క్రోల్ చేస్తున్నప్పుడు, ముఖ్యమైన నావిగేషన్ లింక్‌లు ఎల్లప్పుడూ యాక్సెస్ చేయగలవని నిర్ధారిస్తూ, స్టిక్కీ హెడర్ కనిపిస్తుంది. CSSని ఉపయోగించి స్టిక్కీ హెడర్‌ను రూపొందించడంలో చిక్కులను పరిశోధిద్దాం.

రోజు MUO వీడియో కంటెంట్‌తో కొనసాగడానికి స్క్రోల్ చేయండి

వినియోగదారు స్క్రోల్ చేసినప్పుడు కూడా, స్టిక్కీ హెడర్ వెబ్ పేజీలో ఒకే చోట ఉంటుంది. నిర్దిష్ట CSS లక్షణాలు, ప్రధానంగా స్థానం: అంటుకునే , ఈ ప్రవర్తనను సాధించడానికి మీకు సహాయం చేస్తుంది. పర్యవసానంగా:

వినియోగదారులు పైకి స్క్రోల్ చేయకుండానే ప్రధాన నావిగేషన్ లింక్‌లను సులభంగా యాక్సెస్ చేయవచ్చు.
బ్రాండ్ గుర్తింపును బలోపేతం చేస్తూ లోగో లేదా బ్రాండ్ పేరు కనిపిస్తుంది.
స్టిక్కీ హెడర్ సైడ్‌బార్ నావిగేషన్‌ను తీసివేయడం ద్వారా స్థలాన్ని ఆదా చేస్తుంది, కంటెంట్ కోసం మరింత స్థలాన్ని వదిలివేస్తుంది.

స్టిక్కీ హెడర్‌ను కలిగి ఉండటం వల్ల కొన్ని ప్రయోజనాలలో మెరుగైన వినియోగదారు అనుభవం మరియు సులభమైన వెబ్‌సైట్ నావిగేషన్ ఉన్నాయి.

హెడర్ రూపకల్పన: HTML స్ట్రక్చర్

ఏదైనా స్టిక్కీ హెడర్ యొక్క పునాది దాని HTML నిర్మాణం. మీ స్టిక్కీ హెడర్ కోసం అవసరమైన HTML మూలకాలను ఎలా సృష్టించాలో ఇక్కడ ఉంది.

 <body> 
   <header> 
     <span class="logo">Company Logo 🏠</span> 
     <nav> 
       <ul> 
         <li><a href="#home">Home</a></li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#services">Services</a></li> 
         <li><a href="#contact">Contact</a></li> 
       </ul> 
     </nav> 
   </header> 
   <main id="home"><h1>Home page</h1></main> 
   <section id="about"><h1>About</h1></section> 
   <section id="services"><h1>Services</h1></section> 
   <section id="contact"><h1>Contact</h1></section> 
</body>

ఈ నిర్మాణం లోగోను మరియు నావిగేషన్ లింక్‌ల క్రమం లేని జాబితాతో nav మూలకాన్ని కలిగి ఉన్న హెడర్‌ను ఉపయోగిస్తుంది. ఇది పేజీలోని ప్రతి విభాగాన్ని సూచించడానికి ప్రధాన ట్యాగ్ మరియు అనేక విభాగ ట్యాగ్‌లను ఉపయోగిస్తుంది. ప్రస్తుతానికి, పేజీ ఇలా కనిపిస్తుంది:

ఎలాంటి స్టైలింగ్‌లు వర్తించకుండా స్టిక్కీ హెడర్ లేఅవుట్

CSSతో పునాది వేయడం

దిగువ CSS కోడ్ ఉపయోగిస్తుంది బాక్స్ మోడల్ లక్షణాలు ప్రతి ప్లేస్‌హోల్డర్ విభాగానికి ఎత్తుతో ఆకర్షణీయమైన డిజైన్‌ను రూపొందించడానికి ప్యాడింగ్, మార్జిన్ మరియు ఫ్లెక్స్‌బాక్స్ వంటివి.

 @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap"); 
 
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html { font-size: 62.5%; } 
 
body { font-family: "Quicksand", sans-serif; } 
 
main, 
section { height: 100vh; } 
 
.logo { font-size: 3rem; } 
 
main, 
header, 
section { 
  display: flex; 
  align-items: center; 
} 
 
main { justify-content: center; } 
 
header { 
  justify-content: space-between; 
  padding: 1rem 2rem; 
  background: #b2babb;  
} 
 
nav ul { 
  display: flex; 
  column-gap: 2rem; 
  list-style: none; 
} 
 
a { 
  text-decoration: none; 
  font-size: 2rem; 
  color: #333; 
} 
 
section { justify-content: center; } 
 
#home { background: #2c3e50; } 
 
#about { background: #ccccff; } 
 
#services { background: #f5b7b1; } 
 
#contact { background: #40e0d0; } 
 
h1 { 
 font-size: 4rem; 
 color: #fff; 
}

పేజీ ఇప్పుడు ఇలా ఉండాలి:

అనామక ఫేస్‌బుక్ ఖాతాను ఎలా సృష్టించాలి

స్టిక్కీ ఎఫెక్ట్‌ని అమలు చేస్తోంది: CSS

ప్రస్తుతం, మీరు పేజీని క్రిందికి స్క్రోల్ చేసినప్పుడు, హెడర్ స్క్రీన్ నుండి కదులుతున్నట్లు మీరు గమనించవచ్చు. దీన్ని పరిష్కరించడానికి, ఉపయోగించండి CSS స్థానం ఆస్తి మరియు హెడర్‌ను స్టిక్కీకి సెట్ చేయండి.

ఈ ప్రాపర్టీ వినియోగదారు స్క్రోల్ పొజిషన్‌పై ఆధారపడి సాపేక్ష మరియు స్థిర స్థానాల కలయిక వలె ప్రవర్తిస్తుంది.

 header { 
  justify-content: space-between; 
  padding: 1rem 2rem; 
  position: sticky; 
  top: 0; 
}

హెడర్‌ను స్టిక్కీకి సెట్ చేయడం వలన అది స్క్రోల్‌తో సంబంధం లేకుండా పేజీలో ఒక స్థానానికి కట్టుబడి ఉండేలా చేస్తుంది. అగ్ర ప్రాపర్టీ పేజీలో హెడర్ ఎక్కడ ఉంచాలో నిర్దేశిస్తుంది. ఇప్పుడు, పేజీని క్రిందికి స్క్రోల్ చేయడం వల్ల వస్తుంది:

స్నాప్‌చాట్ ఐఫోన్‌లో డార్క్ మోడ్‌ను ఎలా పొందాలి

సంభావ్య స్టాకింగ్ సమస్యలను పరిష్కరించడం

కొన్నిసార్లు, పేజీలోని ఇతర అంశాలు స్టిక్కీ హెడర్‌తో అతివ్యాప్తి చెందుతాయి. హెడర్ పైన ఉండేలా చూసుకోవడానికి, మీరు z-ఇండెక్స్ ప్రాపర్టీని జోడించవచ్చు:

 header { 
  justify-content: space-between; 
  padding: 1rem 2rem; 
  position: sticky; 
  top: 0; 
  z-index: 9999; 
}

చివరగా, చక్కని వినియోగదారు అనుభవం కోసం HTML మూలకానికి మృదువైన స్క్రోలింగ్ ప్రాపర్టీని జోడించండి:

 html { 
  font-size: 62.5%; 
  scroll-behavior: smooth; 
}

పేజీ ఇప్పుడు విభాగాల మధ్య సజావుగా స్క్రోల్ చేయాలి:

మీ వెబ్‌సైట్ డిజైన్‌కు స్టిక్కీ హెడర్‌ని జోడించడం వలన వినియోగదారు అనుభవాన్ని బాగా మెరుగుపరచవచ్చు. ఈ ఫీచర్ వినియోగదారులను ప్రధాన మెనూకి కనెక్ట్ చేస్తుంది, స్థిరమైన బ్రాండ్‌ను నిర్వహిస్తుంది మరియు మీ వెబ్‌సైట్‌కి ఆధునిక రూపాన్ని ఇస్తుంది.

CSS శక్తితో, ఈ ప్రభావాన్ని సృష్టించడం సూటిగా మరియు ప్రభావవంతంగా ఉంటుంది. వెబ్ డిజైన్ ట్రెండ్‌లు కాలానుగుణంగా మారుతూ ఉంటాయి, అయితే స్టిక్కీ హెడర్ ఎల్లప్పుడూ విభిన్న పరిశ్రమలకు ఉపయోగపడుతుంది.

CSSతో స్టిక్కీ హెడర్‌ను ఎలా నిర్మించాలి

స్టిక్కీ హెడర్ అంటే ఏమిటి?

హెడర్ రూపకల్పన: HTML స్ట్రక్చర్

CSSతో పునాది వేయడం

స్టిక్కీ ఎఫెక్ట్‌ని అమలు చేస్తోంది: CSS

సంభావ్య స్టాకింగ్ సమస్యలను పరిష్కరించడం

CSS స్టిక్కీ హెడర్‌లతో వెబ్ నావిగేషన్‌ను ఎలివేట్ చేస్తోంది