הטכניקה היעילה והעוצמתית הזו היא הרבה יותר קלה להשגה ממה שאתה יכול לצפות.

בעיצוב אתרים, כותרת דביקה היא כלי רב עוצמה שמשפר את חווית המשתמש והניווט. כאשר משתמשים גוללים מטה דף אינטרנט, כותרת דביקה נשארת גלויה, מה שמבטיח שקישורי ניווט חיוניים תמיד נגישים. בואו נעמיק במורכבויות של בניית כותרת דביקה באמצעות CSS.

מה משתמשים בכותרת דביקה?

כותרת דביקה נשארת במקום אחד בדף אינטרנט, גם כשהמשתמש גולל. מאפייני CSS ספציפיים, בעיקר מיקום: דביק, יעזור לך להשיג התנהגות זו. כמה מהיתרונות של כותרת דביקה כוללים חווית משתמש משופרת וניווט קל באתר.

  • משתמשים יכולים לגשת בקלות לקישורי הניווט הראשיים מבלי לגלול למעלה.
  • הלוגו או שם המותג נשארים גלויים, ומחזקים את זהות המותג.
  • כותרת דביקה יכולה לחסוך מקום על ידי הסרת הניווט בסרגל הצד, ולהשאיר יותר מקום לתוכן.

עיצוב הכותרת: מבנה HTML

הבסיס של כל כותרת דביקה הוא מבנה ה-HTML שלה. הנה איך ליצור את רכיבי ה-HTML הדרושים עבור הכותרת הדביקה שלך.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">





instagram viewer

Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

מבנה זה משתמש בכותרת שמכילה את הלוגו ורכיב ניווט עם רשימה לא מסודרת של קישורי ניווט. לאחר מכן הוא משתמש בתג ראשי ובמספר תגי קטע כדי לייצג כל קטע בדף. כרגע העמוד נראה כך:

הנחת היסוד עם CSS

קוד ה-CSS שלהלן משתמש מאפייני דגם הקופסה כמו ריפוד, שוליים ו-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; 
}


navul {
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, יצירת אפקט זה היא פשוטה ויעילה. מגמות עיצוב אתרים משתנות עם הזמן, אבל הכותרת הדביקה תמיד שימושית לתעשיות שונות.