วิธีสร้าง Sticky Header ใน React

ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร อ่านเพิ่มเติม.

การออกแบบเว็บไซต์บางแห่งใช้ส่วนหัวที่ 'ติด' ไว้ที่ด้านบนของหน้าจอเมื่อคุณเลื่อนลง ส่วนหัวที่มองเห็นได้ขณะที่คุณเลื่อนมักจะเรียกว่าส่วนหัวแบบติดหนึบ

คุณสามารถเพิ่มส่วนหัวติดหนึบในไซต์ React ของคุณได้โดยเขียนโค้ดที่กำหนดเองด้วยตัวคุณเองหรือใช้ไลบรารีของบุคคลที่สาม

---

---

Sticky Header คืออะไร?

ส่วนหัวแบบติดหนึบคือส่วนหัวที่ยังคงอยู่ที่ด้านบนสุดของหน้าจอขณะที่ผู้ใช้เลื่อนหน้าลงมา สิ่งนี้มีประโยชน์ในการทำให้ข้อมูลสำคัญสามารถมองเห็นได้ในขณะที่ผู้ใช้เลื่อน

สร้างวิดีโอประจำวัน

อย่างไรก็ตาม โปรดจำไว้ว่าส่วนหัวของสติ๊กจะลดจำนวนพื้นที่หน้าจอสำหรับการออกแบบที่เหลืออยู่ของคุณ หากคุณใช้ส่วนหัวแบบติดหนึบ คุณควรทำให้สั้น

การสร้างส่วนหัวที่เหนียว

สิ่งแรกที่คุณต้องทำคือตั้งค่าตัวจัดการ onscroll ฟังก์ชันนี้จะทำงานทุกครั้งที่ผู้ใช้เลื่อน คุณสามารถทำได้โดยเพิ่มตัวฟังเหตุการณ์ onscroll ให้กับวัตถุหน้าต่างและโดย ใช้ React hooks . ในการตั้งค่า onscroll handler คุณต้องใช้ useEffect hook และเมธอด addEventListener ของ window object

รหัสต่อไปนี้สร้างส่วนประกอบส่วนหัวแบบติดหนึบและจัดรูปแบบโดยใช้ 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; 
} 

หน้าผลลัพธ์จะมีลักษณะดังนี้:

คุณลักษณะเพิ่มเติม

มีสิ่งอื่นๆ อีกสองสามอย่างที่คุณสามารถทำได้เพื่อทำให้ส่วนหัวแบบติดหนึบของคุณเป็นมิตรกับผู้ใช้มากขึ้น ตัวอย่างเช่น คุณสามารถเพิ่มปุ่มย้อนกลับหรือทำให้ส่วนหัวโปร่งใสเมื่อผู้ใช้เลื่อนลง

---

---

วิธีเล่นเกมพีซีบนทีวี

คุณสามารถใช้โค้ดต่อไปนี้เพื่อเพิ่มปุ่ม back-to-top

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-sticky library ช่วยให้คุณสร้างองค์ประกอบที่เหนียวใน React หากต้องการใช้ react-sticky ให้ติดตั้งก่อน:

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 จากไลบรารี react-sticky ก่อน

จากนั้น คุณต้องเพิ่มส่วนประกอบ StickyContainer รอบๆ เนื้อหาที่ควรมีองค์ประกอบ Sticky ในกรณีนี้ คุณต้องการทำให้ส่วนหัวเป็นแบบติดหนึบภายในรายการที่ตามมา ดังนั้นให้เพิ่ม StickyContainer รอบทั้งสอง

ถัดไป เพิ่มองค์ประกอบ Sticky รอบองค์ประกอบที่คุณต้องการให้ Sticky ในกรณีนี้ นั่นคือองค์ประกอบส่วนหัว

สุดท้ายเพิ่มสไตล์ให้กับส่วนประกอบ Sticky สิ่งนี้จะวางตำแหน่งส่วนหัวได้อย่างถูกต้อง

วิธีย้อนกลับข้อมูลใน excel

ใช้ react-stickynode

React-stickynode เป็นอีกไลบรารีหนึ่งที่ช่วยคุณสร้างองค์ประกอบเหนียวใน React

หากต้องการใช้ react-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;

เริ่มต้นด้วยการอิมพอร์ตส่วนประกอบ Sticky จากไลบรารี react-stickynode

จากนั้นเพิ่มส่วนประกอบ Sticky รอบองค์ประกอบที่คุณต้องการให้ Sticky ในกรณีนี้ ทำให้ส่วนหัวเป็นแบบติดหนึบโดยเพิ่มส่วนประกอบแบบติดหนึบรอบๆ

สุดท้าย เพิ่มอุปกรณ์ประกอบฉากที่เปิดใช้งานและด้านล่างของขอบไปยังส่วนประกอบ Sticky อุปกรณ์ประกอบฉากที่เปิดใช้งานจะทำให้แน่ใจว่าส่วนหัวนั้นติดหนึบ และอุปกรณ์ประกอบฉากด้านล่างจะช่วยให้แน่ใจว่าไม่ได้ลงไปใต้หน้ากระดาษมากเกินไป

ปรับปรุงประสบการณ์ผู้ใช้

ด้วยส่วนหัวที่เหนียว ผู้ใช้อาจหลงทางว่าตนอยู่ที่ใดในหน้านั้นได้โดยง่าย ส่วนหัวที่เหนียวอาจเป็นปัญหาอย่างยิ่งในอุปกรณ์พกพาที่หน้าจอมีขนาดเล็ก

เพื่อปรับปรุงประสบการณ์ผู้ใช้ คุณยังสามารถเพิ่มปุ่ม 'กลับไปด้านบน' ปุ่มดังกล่าวช่วยให้ผู้ใช้สามารถเลื่อนกลับไปที่ด้านบนของหน้าได้อย่างรวดเร็ว ซึ่งจะมีประโยชน์อย่างยิ่งในหน้ายาวๆ

เมื่อคุณพร้อม คุณสามารถปรับใช้แอป React ของคุณได้ฟรีบน GitHub Pages