چگونه یک هدر چسبنده در React ایجاد کنیم

با یکی از این تکنیک های ساده، یک هدر ثابت به طراحی صفحه خود اضافه کنید.

برخی از طراحی‌های وب‌سایت از یک هدر استفاده می‌کنند که هنگام اسکرول کردن به سمت پایین به بالای صفحه می‌چسبد. هدری که در حین پیمایش قابل مشاهده باقی می ماند، اغلب هدر چسبنده نامیده می شود.

می‌توانید با نوشتن کد سفارشی خودتان یا با استفاده از یک کتابخانه شخص ثالث، یک هدر چسبنده به سایت React خود اضافه کنید.

هدر چسبنده چیست؟

هدر چسبنده هدری است که وقتی کاربر صفحه را به پایین اسکرول می کند در بالای صفحه ثابت می ماند. این می تواند برای قابل مشاهده نگه داشتن اطلاعات مهم در حین پیمایش کاربر مفید باشد.

با این حال، به خاطر داشته باشید که یک هدر چسب، مقدار صفحه نمایش واقعی برای طراحی باقیمانده شما را کاهش می دهد. اگر از هدر چسبنده استفاده می کنید، بهتر است آن را کوتاه نگه دارید.

ایجاد یک هدر چسبنده

اولین کاری که باید انجام دهید این است که یک onscroll handler را راه اندازی کنید. این عملکرد هر بار که کاربر پیمایش می کند اجرا می شود. می توانید این کار را با افزودن یک شنونده رویداد onscroll به شی پنجره و با استفاده از قلاب های React انجام دهید. برای راه اندازی onscroll handler، باید از قلاب useEffect و متد addEventListener شی پنجره استفاده کنید.

کد زیر یک کامپوننت هدر چسبنده ایجاد می کند و با استفاده از CSS به آن استایل می دهد.

import React, { useState, useEffect } from &aposreact&apos;\nfunction StickyHeader() {\n const [isSticky, setSticky] = useState(false);\n const handleScroll = () => {\n const windowScrollTop = window.scrollY;\n if (windowScrollTop > 10) {\n setSticky(true);\n } else {\n setSticky(false);\n }\n };\n useEffect(() => {\n window.addEventListener(&aposscroll&apos, handleScroll);\n return () => {\n window.removeEventListener(&aposscroll&apos, handleScroll);\n };\n }, []);\n const items = [\n {\n name: &aposHome&apos,\n link: &apos/&apos\n },\n {\n name: &aposAbout&apos,\n link: &apos/about&apos\n },\n {\n name: &aposContact&apos,\n link: &apos/contact&apos\n }\n ];\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div className="App">\n <header style={{ background: isSticky ? &apos#fff&apos : &apos&apos, width: &apos100%&apos, zIndex: &apos999&apos,position:isSticky ?&aposfixed&apos:&aposabsolute&apos }}>\n {items.map(item => (\n <a href={item.link} key={item.name}>\n {item.name}\n </a>\n ))}\n </header>\n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n </div>\n );\n}\nexport default StickyHeader;

این روش از استایل درون خطی استفاده می کند، اما می توانید از کلاس های CSS نیز استفاده کنید. مثلا:

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

صفحه حاصل به شکل زیر خواهد بود:

ویژگی های اضافی

چند کار دیگر وجود دارد که می توانید برای کاربرپسندتر کردن هدر چسبنده خود انجام دهید. برای مثال، می‌توانید یک دکمه بازگشت به بالا اضافه کنید یا زمانی که کاربر به پایین اسکرول می‌کند، سرصفحه را شفاف کنید.

برای افزودن دکمه بازگشت به بالا می توانید از کد زیر استفاده کنید.

import React, { useState, useEffect } from &aposreact&apos;\nfunction StickyHeader() {\n const [isSticky, setSticky] = useState(false);\n const [showBackToTop, setShowBackToTop] = useState(false);\n const handleScroll = () => {\n const windowScrollTop = window.scrollY;\n if (windowScrollTop > 10) {\n setSticky(true);\n setShowBackToTop(true);\n } else {\n setSticky(false);\n setShowBackToTop(false);\n }\n };\n const scrollToTop = () => {\n window.scrollTo({\n top: 0,\n behavior: &apossmooth&apos\n });\n };\n useEffect(() => {\n window.addEventListener(&aposscroll&apos, handleScroll);\n return () => {\n window.removeEventListener(&aposscroll&apos, handleScroll);\n };\n }, []);\n const items = [\n {\n name: &aposHome&apos,\n link: &apos/&apos\n },\n {\n name: &aposAbout&apos,\n link: &apos/about&apos\n },\n {\n name: &aposContact&apos,\n link: &apos/contact&apos\n }\n ];\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div className="App">\n <header style={{ background: isSticky ? &apos#fff&apos : &apos&apos, width: &apos100%&apos, zIndex: &apos999&apos,position:isSticky ?&aposfixed&apos:&aposabsolute&apos }}>\n {items.map(item => (\n <a href={item.link} key={item.name}>\n {item.name}\n </a>\n ))}\n </header>\n \n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n <div>\n {showBackToTop && (\n <button onClick={scrollToTop}>Back to top</button>\n )}</div>\n </div>\n );\n}\nexport default StickyHeader;

این کد یک جزء هدر چسبنده ایجاد می کند و با استفاده از CSS به آن استایل می دهد. همچنین می توانید با استفاده از Tailwind CSS به کامپوننت استایل دهید.

روش های جایگزین

همچنین می توانید از یک کتابخانه شخص ثالث برای ایجاد هدر چسبنده استفاده کنید.

استفاده از react-stiky

کتابخانه react-sticky به شما کمک می کند عناصر چسبنده را در React ایجاد کنید. برای استفاده از react-stiky ابتدا آن را نصب کنید:

npm install react-sticky

سپس، می توانید از آن به صورت زیر استفاده کنید:

import React from &aposreact&apos;\nimport { StickyContainer, Sticky } from &aposreact-sticky&apos;\nfunction App() {\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div>\n <StickyContainer>\n <Sticky>{({ style }) => (\n <header style={style}>\n This is a sticky header\n </header>\n )}\n </Sticky>\n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n </StickyContainer>\n \n </div>\n );\n}\nexport default App;

در کد بالا، ابتدا باید اجزای StickyContainer و Sticky را از کتابخانه react-sticky وارد کنید.

سپس، باید مولفه StickyContainer را در اطراف محتوایی که باید حاوی عنصر چسبنده باشد، اضافه کنید. در این حالت، می‌خواهید هدر را در لیستی که به دنبال آن است، چسبناک کنید، بنابراین StickyContainer را در اطراف آن دو اضافه کنید.

بعد، مولفه Sticky را در اطراف عنصری که می‌خواهید چسبناک کنید، اضافه کنید. در این مورد، آن عنصر هدر است.

در نهایت یک استایل به کامپوننت Sticky اضافه کنید. این هدر را به درستی قرار می دهد.

با استفاده از react-stickynode

React-stickynode کتابخانه دیگری است که به شما کمک می کند عناصر چسبنده را در React ایجاد کنید.

برای استفاده از react-stickynode ابتدا آن را نصب کنید:

npm install react-stickynode

سپس می توانید از آن به صورت زیر استفاده کنید:

import React from &aposreact&apos;\nimport Sticky from &aposreact-stickynode&apos;\nfunction App() {\n const data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]\n return (\n <div>\n <Sticky enabled={true} bottomBoundary={1200}>\n <div>\n This is a sticky header\n </div>\n </Sticky>\n <ul>\n {data.map((x) => {\n return (<li key={x}>{x}</li>)\n })}\n </ul>\n </div>\n );\n}\nexport default App;

با وارد کردن مولفه Sticky از کتابخانه react-stickynode شروع کنید.

سپس، مولفه Sticky را در اطراف عنصری که می‌خواهید چسبناک کنید، اضافه کنید. در این حالت هدر را با اضافه کردن مولفه Sticky در اطراف آن چسبناک کنید.

در نهایت، props فعال و bottomBoundary را به کامپوننت Sticky اضافه کنید. پایه فعال شده مطمئن می شود که هدر چسبنده است و پایه bottomBoundary اطمینان حاصل می کند که خیلی از صفحه پایین نمی رود.

بهبود تجربه کاربری

با یک هدر چسبنده، کاربر می تواند به راحتی مسیر خود را در صفحه از دست بدهد. هدرهای چسبنده می توانند به خصوص در دستگاه های تلفن همراه که صفحه نمایش کوچکتر است مشکل ساز باشند.

برای بهبود تجربه کاربری، می‌توانید دکمه «بازگشت به بالا» را نیز اضافه کنید. چنین دکمه ای به کاربر اجازه می دهد تا به سرعت به بالای صفحه برگردد. این به خصوص در صفحات طولانی می تواند مفید باشد.

وقتی آماده شدید، می توانید برنامه React خود را به صورت رایگان در صفحات GitHub مستقر کنید.

منبع مقاله