كيفية إنشاء رأس مثبت في React

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

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

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

---

---

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

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

اجعل فيديو اليوم

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

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

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

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

import React, { useState, useEffect } from 'react'; 
function StickyHeader() { 
  const [isSticky, setSticky] = useState(false); 
  const handleScroll = () => { 
    const windowScrollTop = window.scrollY; 
    if (windowScrollTop > 10) { 
      setSticky(true); 
    } else { 
      setSticky(false); 
    } 
  }; 
  useEffect(() => { 
    window.addEventListener('scroll', handleScroll); 
    return () => { 
      window.removeEventListener('scroll', handleScroll); 
    }; 
  }, []); 
  const items = [ 
    { 
      name: 'Home', 
      link: '/' 
    }, 
    { 
      name: 'About', 
      link: '/about' 
    }, 
    { 
      name: 'Contact', 
      link: '/contact' 
    } 
  ]; 
  const data = [ 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 ] 
  return ( 
    <div className="App"> 
      <header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}> 
        {items.map(item => ( 
          <a href={item.link} key={item.name}> 
            {item.name} 
          </a> 
        ))} 
      </header> 
      <ul> 
        {data.map((x) => { 
          return (<li key={x}>{x}</li>) 
        })} 
      </ul> 
    </div> 
  ); 
} 
export default StickyHeader;

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

---

---

.sticky { 
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: 999; 
} 

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

ميزات إضافية

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

---

---

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

import React, { useState, useEffect } from 'react'; 
function StickyHeader() { 
  const [isSticky, setSticky] = useState(false); 
  const [showBackToTop, setShowBackToTop] = useState(false); 
  const handleScroll = () => { 
    const windowScrollTop = window.scrollY; 
    if (windowScrollTop > 10) { 
      setSticky(true); 
      setShowBackToTop(true); 
    } else { 
      setSticky(false); 
      setShowBackToTop(false); 
    } 
  }; 
  const scrollToTop = () => { 
    window.scrollTo({ 
      top: 0, 
      behavior: 'smooth' 
    }); 
  }; 
  useEffect(() => { 
    window.addEventListener('scroll', handleScroll); 
    return () => { 
      window.removeEventListener('scroll', handleScroll); 
    }; 
  }, []); 
  const items = [ 
    { 
      name: 'Home', 
      link: '/' 
    }, 
    { 
      name: 'About', 
      link: '/about' 
    }, 
    { 
      name: 'Contact', 
      link: '/contact' 
    } 
  ]; 
  const data = [ 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 ] 
  return ( 
    <div className="App"> 
      <header style={{ background: isSticky ? '#fff' : '', width: '100%', zIndex: '999',position:isSticky ?'fixed':'absolute' }}> 
        {items.map(item => ( 
          <a href={item.link} key={item.name}> 
            {item.name} 
          </a> 
        ))} 
      </header> 
      
      <ul> 
        {data.map((x) => { 
          return (<li key={x}>{x}</li>) 
        })} 
      </ul> 
      <div> 
      {showBackToTop && ( 
        <button onClick={scrollToTop}>Back to top</button> 
      )}</div> 
    </div> 
  ); 
} 
export default StickyHeader;

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

طرق بديلة

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

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

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

npm install react-sticky

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

import React from 'react'; 
import { StickyContainer, Sticky } from 'react-sticky'; 
function App() { 
  const data = [ 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 ] 
  return ( 
    <div> 
      <StickyContainer> 
      <Sticky>{({ style }) => ( 
          <header style={style}> 
            This is a sticky header 
          </header> 
        )} 
      </Sticky> 
      <ul> 
      {data.map((x) => { 
          return (<li key={x}>{x}</li>) 
        })} 
        </ul> 
      </StickyContainer> 
       
    </div> 
  ); 
} 
export default App;

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

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

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

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

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

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

كيفية حذف أحداث تقويم iphone

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

npm install react-stickynode

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

import React from 'react'; 
import Sticky from 'react-stickynode'; 
function App() { 
  const data = [ 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 ] 
  return ( 
    <div> 
      <Sticky enabled={true}  bottomBoundary={1200}> 
        <div> 
          This is a sticky header 
        </div> 
      </Sticky> 
      <ul> 
        {data.map((x) => { 
          return (<li key={x}>{x}</li>) 
        })} 
      </ul> 
    </div> 
  ); 
} 
export default App;

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

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

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

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

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

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

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