القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

تستخدم بعض تصميمات مواقع الويب رأسًا "يلتصق" بأعلى الشاشة أثناء التمرير لأسفل. غالبًا ما يسمى الرأس الذي يظل مرئيًا أثناء التمرير بالرأس الثابت.

يمكنك إضافة رأس ثابت إلى موقع React الخاص بك عن طريق كتابة رمز مخصص بنفسك أو باستخدام مكتبة جهة خارجية.

ما هو الرأس اللاصق؟

الرأس اللاصق هو رأس يظل ثابتًا في الجزء العلوي من الشاشة أثناء قيام المستخدم بالتمرير لأسفل الصفحة. يمكن أن يكون هذا مفيدًا في إبقاء المعلومات المهمة مرئية أثناء قيام المستخدم بالتمرير.

ومع ذلك ، ضع في اعتبارك أن رأس العصا يقلل من مقدار مساحة الشاشة لتصميمك المتبقي. إذا كنت تستخدم عنوانًا ثابتًا ، فمن الجيد أن تجعله قصيرًا.

إنشاء رأس مثبت

أول شيء عليك القيام به هو إعداد معالج عند التمرير. سيتم تشغيل هذه الوظيفة في كل مرة يقوم فيها المستخدم بالتمرير. يمكنك القيام بذلك عن طريق إضافة مستمع حدث onscroll إلى كائن النافذة وبواسطة باستخدام خطافات React. لإعداد معالج onscroll ، تحتاج إلى استخدام الخطاف useEffect وطريقة addEventListener لكائن النافذة.

instagram viewer

يُنشئ الكود التالي مكون رأس مثبت ويصممه باستخدام CSS.

يستورد React ، {useState ، useEffect} من 'تتفاعل'؛
وظيفةرأس مثبت() {
مقدار ثابت [isSticky، setSticky] = useState (خطأ شنيع);
مقدار ثابت handleScroll = () => {
مقدار ثابت windowScrollTop = نافذة او شباك.scrollY ؛
 إذا كان (windowScrollTop > 10) {
 مجموعة مثبتة (حقيقي);
 } آخر {
 مجموعة مثبتة (خطأ شنيع);
 }
 };
 useEffect (() => {
 window.addEventListener ('التمرير'، handleScroll) ؛
يعود () => {
 window.removeEventListener ('التمرير'، handleScroll) ؛
 };
 }, []);
مقدار ثابت العناصر = [
 {
 اسم: 'بيت',
 وصلة: '/'
 },
 {
 اسم: 'عن',
 وصلة: '/about'
 },
 {
 اسم: 'اتصال',
 وصلة: '/contact'
 }
 ];
مقدار ثابت البيانات = [ 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 (item => (
<أ href = {item.link} مفتاح = {item.name}>
 {اسم العنصر}
</أ>
 ))}
</header>
<ماي>
 {data.map ((x) => {
 يعود (<مفتاح li = {x}>{x}</li>)
 })}
</ul>
</div>
 );
}
يصدّرتقصير رأس مثبت ؛

تستخدم هذه الطريقة أسلوبًا مضمنًا ، ولكن يمكنك أيضًا استخدام فئات CSS. على سبيل المثال:

.لزج {
 الموقف: ثابت ؛
 أعلى: 0؛
 العرض: 100٪؛
 مؤشر z: 999 ؛
}

ستبدو الصفحة الناتجة كما يلي:

ميزات إضافية

هناك بعض الأشياء الأخرى التي يمكنك القيام بها لجعل رأسك اللاصق أكثر سهولة في الاستخدام. على سبيل المثال ، يمكنك إضافة زر الرجوع إلى الأعلى أو جعل الرأس شفافًا عندما يقوم المستخدم بالتمرير لأسفل.

يمكنك استخدام الكود التالي لإضافة زر العودة إلى الأعلى.

يستورد React ، {useState ، useEffect} من 'تتفاعل'؛
وظيفةرأس مثبت() {
مقدار ثابت [isSticky، setSticky] = useState (خطأ شنيع);
مقدار ثابت [showBackToTop ، setShowBackToTop] = useState (خطأ شنيع);
مقدار ثابت handleScroll = () => {
مقدار ثابت windowScrollTop = نافذة او شباك.scrollY ؛
 إذا كان (windowScrollTop > 10) {
 مجموعة مثبتة (حقيقي);
 setShowBackToTop (حقيقي);
 } آخر {
 مجموعة مثبتة (خطأ شنيع);
 setShowBackToTop (خطأ شنيع);
 }
 };
مقدار ثابت scrollToTop = () => {
نافذة او شباك.انتقل إلى({
 أعلى: 0 ،
 سلوك: 'سلس'
 });
 };
 useEffect (() => {
 window.addEventListener ('التمرير'، handleScroll) ؛
يعود () => {
 window.removeEventListener ('التمرير'، handleScroll) ؛
 };
 }, []);
مقدار ثابت العناصر = [
 {
 اسم: 'بيت',
 وصلة: '/'
 },
 {
 اسم: 'عن',
 وصلة: '/about'
 },
 {
 اسم: 'اتصال',
 وصلة: '/contact'
 }
 ];
مقدار ثابت البيانات = [ 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 (item => (
<أ href = {item.link} مفتاح = {item.name}>
 {اسم العنصر}
</أ>
 ))}
</header>
<ماي>
 {data.map ((x) => {
 يعود (<مفتاح li = {x}>{x}</li>)
 })}
</ul>
<شعبة>
 {showBackToTop && (
<زر onClick = {scrollToTop}>عد إلى الأعلى</button>
 )}</div>
</div>
 );
}
يصدّرتقصير رأس مثبت ؛

ينشئ هذا الكود مكون رأس مثبت ويصممه باستخدام CSS. بامكانك ايضا نمط المكون باستخدام Tailwind CSS.

طرق بديلة

يمكنك أيضًا استخدام مكتبة جهة خارجية لإنشاء رأس ثابت.

باستخدام رد فعل لزجة

تساعدك مكتبة رد الفعل اللاصقة على إنشاء عناصر ثابتة في React. لاستخدام رد الفعل اللاصق ، قم بتثبيته أولاً:

npm ثَبَّتَ رد فعل لزجة

بعد ذلك ، يمكنك استخدامه على النحو التالي:

يستورد تتفاعل من 'تتفاعل'؛
يستورد {StickyContainer، Sticky} من "رد فعل لزجة" ؛
وظيفةبرنامج() {
مقدار ثابت البيانات = [ 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 ]
يعود (
<شعبة>
<حاوية لاصقة>
<لزج>{({style}) => (
<نمط الرأس = {style}>
 هذا يكون رأس مثبت
</header>
 )}
</Sticky>
<ماي>
 {data.map ((x) => {
 يعود (<مفتاح li = {x}>{x}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
يصدّرتقصير برنامج؛

في الكود أعلاه ، تحتاج أولاً إلى استيراد مكونات StickyContainer و Sticky من مكتبة التفاعل اللاصق.

بعد ذلك ، تحتاج إلى إضافة مكون StickyContainer حول المحتوى الذي يجب أن يحتوي على العنصر الثابت. في هذه الحالة ، تريد أن تجعل العنوان ثابتًا داخل القائمة التي تليها ، لذا أضف StickyContainer حول الاثنين.

بعد ذلك ، أضف المكون اللاصق حول العنصر الذي تريد جعله لزجًا. في هذه الحالة ، هذا هو عنصر الرأس.

أخيرًا ، أضف خاصية نمط إلى المكون اللاصق. سيؤدي هذا إلى وضع الرأس بشكل صحيح.

باستخدام رد فعل stickynode

React-stickynode هي مكتبة أخرى تساعدك على إنشاء عناصر ثابتة في React.

لاستخدام رد فعل stickynode ، قم بتثبيته أولاً:

npm ثَبَّتَ رد فعل stickynode

ثم يمكنك استخدامه على النحو التالي:

يستورد تتفاعل من 'تتفاعل'؛
يستورد لزج من "رد فعل- stickynode" ؛
وظيفةبرنامج() {
مقدار ثابت البيانات = [ 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 ]
يعود (
<شعبة>
<ثابت ممكّن = {true} bottomBoundary = {1200}>
<شعبة>
 هذا يكون رأس مثبت
</div>
</Sticky>
<ماي>
 {data.map ((x) => {
 يعود (<مفتاح li = {x}>{x}</li>)
 })}
</ul>
</div>
 );
}
يصدّرتقصير برنامج؛

ابدأ باستيراد المكون اللاصق من مكتبة رد فعل- stickynode.

ثم أضف المكون اللاصق حول العنصر الذي تريد جعله لزجًا. في هذه الحالة ، اجعل الرأس مثبتًا بإضافة المكون اللاصق حوله.

أخيرًا ، أضف خاصيتي التمكين و bottomBoundary إلى المكون اللاصق. ستتأكد الخاصية المُمكَّنة من أن العنوان ثابت ، وستضمن خاصية bottomBoundary عدم انتقالها بعيدًا جدًا أسفل الصفحة.

تحسين تجربة المستخدم

باستخدام الرأس اللاصق ، يمكن أن يكون من السهل على المستخدم أن يفقد مساره في مكان وجوده على الصفحة. يمكن أن تكون الرؤوس الثابتة مشكلة بشكل خاص على الأجهزة المحمولة ، حيث تكون الشاشة أصغر.

لتحسين تجربة المستخدم ، يمكنك أيضًا إضافة زر "الرجوع إلى الأعلى". يسمح هذا الزر للمستخدم بالتمرير بسرعة إلى أعلى الصفحة. يمكن أن يكون هذا مفيدًا بشكل خاص في الصفحات الطويلة.

عندما تكون جاهزًا ، يمكنك نشر تطبيق React مجانًا على صفحات GitHub.