כיצד ליצור כותרת דביקה ב-React

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

אתה יכול להוסיף כותרת דביקה לאתר React שלך על ידי כתיבת קוד מותאם אישית בעצמך או על ידי שימוש בספריית צד שלישי.

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

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

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

יצירת כותרת דביקה

הדבר הראשון שתצטרכו לעשות הוא להגדיר מטפל ב-onscroll. פונקציה זו תפעל בכל פעם שהמשתמש גולל. אתה יכול לעשות זאת על ידי הוספת מאזין אירועי על-גלילה לאובייקט החלון ועל ידי באמצעות ווי React. כדי להגדיר את ה-onscroll המטפל, עליך להשתמש ב-useEffect hook ובשיטת addEventListener של אובייקט החלון.

הקוד הבא יוצר רכיב כותרת דביק ומעצב אותו באמצעות CSS.

יְבוּא תגובה, { useState, useEffect } מ 'לְהָגִיב';
פוּנקצִיָהStickyHeader() {
const [isSticky, setSticky] = useState(שֶׁקֶר);
const handleScroll = () => {
const windowScrollTop = חַלוֹן.scrollY;
 if (windowScrollTop > 10) {
 setSticky(נָכוֹן);
 } אַחֵר {
 setSticky(שֶׁקֶר);
 }
 };
 useEffect(() => {
 window.addEventListener('גְלִילָה', handleScroll);
לַחֲזוֹר () => {
 window.removeEventListener('גְלִילָה', handleScroll);
 };
 }, []);
const פריטים = [
 {
 שֵׁם: 'בית',
 קישור: '/'
 },
 {
 שֵׁם: 'על אודות',
 קישור: '/about'
 },
 {
 שֵׁם: 'איש קשר',
 קישור: '/contact'
 }
 ];
const נתונים = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
לַחֲזוֹר (
<div className="אפליקציה">
<header style={{ background: isSticky? '#fff': '', רוחב: '100%', zIndex: '999',עמדה: הוא דביק ?'תוקן':'מוּחלָט' }}>
 {items.map (פריט => (
<a href={item.link} key={item.name}>
 {שם הפריט}
</א>
 ))}
</header>
<ul>
 {data.map((x) => {
 לחזור (<li key={x}>{איקס}</li>)
 })}
</ul>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל StickyHeader;

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

.דָבִיק {
 מיקום: קבוע;
 למעלה: 0;
 רוחב: 100%;
 z-index: 999;
}

העמוד שיתקבל ייראה כך:

תכונות נוספות

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

אתה יכול להשתמש בקוד הבא כדי להוסיף כפתור חזרה למעלה.

יְבוּא תגובה, { useState, useEffect } מ 'לְהָגִיב';
פוּנקצִיָהStickyHeader() {
const [isSticky, setSticky] = useState(שֶׁקֶר);
const [showBackToTop, setShowBackToTop] = useState(שֶׁקֶר);
const handleScroll = () => {
const windowScrollTop = חַלוֹן.scrollY;
 if (windowScrollTop > 10) {
 setSticky(נָכוֹן);
 setShowBackToTop(נָכוֹן);
 } אַחֵר {
 setSticky(שֶׁקֶר);
 setShowBackToTop(שֶׁקֶר);
 }
 };
const scrollToTop = () => {
חַלוֹן.scrollTo({
 למעלה: 0,
 התנהגות: 'חלק'
 });
 };
 useEffect(() => {
 window.addEventListener('גְלִילָה', handleScroll);
לַחֲזוֹר () => {
 window.removeEventListener('גְלִילָה', handleScroll);
 };
 }, []);
const פריטים = [
 {
 שֵׁם: 'בית',
 קישור: '/'
 },
 {
 שֵׁם: 'על אודות',
 קישור: '/about'
 },
 {
 שֵׁם: 'איש קשר',
 קישור: '/contact'
 }
 ];
const נתונים = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
לַחֲזוֹר (
<div className="אפליקציה">
<header style={{ background: isSticky? '#fff': '', רוחב: '100%', zIndex: '999',עמדה: הוא דביק ?'תוקן':'מוּחלָט' }}>
 {items.map (פריט => (
<a href={item.link} key={item.name}>
 {שם הפריט}
</א>
 ))}
</header>
<ul>
 {data.map((x) => {
 לחזור (<li key={x}>{איקס}</li>)
 })}
</ul>
<div>
 {showBackToTop && (
<button onClick={scrollToTop}>חזרה למעלה</button>
 )}</div>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל StickyHeader;

קוד זה יוצר רכיב כותרת דביק ומעצב אותו באמצעות CSS. אתה יכול גם סגננו את הרכיב באמצעות Tailwind CSS.

שיטות חלופיות

אתה יכול גם להשתמש בספריית צד שלישי כדי ליצור כותרת דביקה.

שימוש ב-react-sticky

ספריית react-sticky עוזרת לך ליצור אלמנטים דביקים ב-React. כדי להשתמש ב-react-sticky, התקן אותו תחילה:

npm להתקין להגיב-דביק

לאחר מכן, אתה יכול להשתמש בו כך:

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא { StickyContainer, Sticky } מ 'תגובה-דביקה';
פוּנקצִיָהאפליקציה() {
const נתונים = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
לַחֲזוֹר (
<div>
<StickyContainer>
<דָבִיק>{({ סגנון }) => (
<סגנון כותרת={סגנון}>
 זֶה הוא כותרת דביקה
</header>
 )}
</Sticky>
<ul>
 {data.map((x) => {
 לחזור (<li key={x}>{איקס}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בקוד שלמעלה, תחילה עליך לייבא את הרכיבים StickyContainer ו- Sticky מספריית react-sticky.

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

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

לבסוף, הוסף אביזר סגנון לרכיב Sticky. זה ימקם את הכותרת בצורה נכונה.

שימוש ב-react-stickynode

React-stickynode היא ספרייה נוספת שעוזרת לך ליצור אלמנטים דביקים ב-React.

כדי להשתמש ב-react-stickynode, תחילה התקן אותו:

npm להתקין react-stickynode

אז אתה יכול להשתמש בו כך:

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא דָבִיק מ 'react-stickynode';
פוּנקצִיָהאפליקציה() {
const נתונים = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
לַחֲזוֹר (
<div>
<Sticky enabled={true} bottomBoundary={1200}>
<div>
 זֶה הוא כותרת דביקה
</div>
</Sticky>
<ul>
 {data.map((x) => {
 לחזור (<li key={x}>{איקס}</li>)
 })}
</ul>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

התחל בייבוא ​​הרכיב Sticky מספריית react-stickynode.

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

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

שפר את חווית המשתמש

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

כדי לשפר את חווית המשתמש, ניתן להוסיף גם כפתור "חזרה למעלה". כפתור כזה מאפשר למשתמש לגלול במהירות חזרה לראש העמוד. זה יכול להיות מועיל במיוחד בדפים ארוכים.

כשתהיה מוכן, תוכל לפרוס את אפליקציית React שלך בחינם בדפי GitHub.