Ինչպես կառուցել կպչուն վերնագիր CSS-ով
Այս արդյունավետ և հզոր տեխնիկան շատ ավելի հեշտ է հասնել, քան դուք կարող եք ակնկալել:
Վեբ դիզայնի մեջ կպչուն վերնագիրը հզոր գործիք է, որն ուժեղացնում է օգտատերերի փորձը և նավիգացիան: Երբ օգտվողները ոլորում են վեբ էջի ներքև, կպչուն վերնագիրը մնում է տեսանելի՝ ապահովելով, որ հիմնական նավիգացիոն հղումները միշտ հասանելի են: Եկեք խորանանք CSS-ի միջոցով կպչուն վերնագիր կառուցելու բարդությունների մեջ:
Ի՞նչ է կպչուն վերնագիրը:
Կպչուն վերնագիրը մնում է վեբ էջի մեկ տեղում, նույնիսկ երբ օգտատերը ոլորում է: Հատուկ 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>
Այս կառուցվածքը օգտագործում է վերնագիր, որը պարունակում է լոգոն և navigation տարր՝ նավիգացիոն հղումների չդասավորված ցանկով: Այնուհետև այն օգտագործում է հիմնական թեգ և մի քանի հատվածի պիտակներ՝ էջի յուրաքանչյուր բաժինը ներկայացնելու համար: Այս պահին էջն ունի հետևյալ տեսքը.
Հիմքը դնելով CSS-ով
Ստորև բերված CSS կոդը օգտագործում է տուփի մոդելի հատկություններ, ինչպիսիք են padding, margin և flexbox՝ գրավիչ դիզայն ստեղծելու համար՝ յուրաքանչյուր տեղապահի հատվածի բարձրությամբ:
@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-index հատկությունը.
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-ի հզորությամբ այս էֆեկտի ստեղծումը պարզ և արդյունավետ է: Վեբ դիզայնի միտումները ժամանակի ընթացքում փոխվում են, բայց կպչուն վերնագիրը միշտ օգտակար է տարբեր ոլորտների համար: