ซ่อน Navbar ขณะเลื่อนหน้าจอง่ายๆ ด้วย React Headroom กันเถอะ!!!

สวัสดีครับทุกคน ในฐานะที่เราเป็น Front-end Developer มีหน้าที่จัดการส่วนของฝั่งหน้าบ้านแล้ว สิ่งที่จำเป็นต้องคำนึงถึงก็คือประสบการณ์การใช้งานของผู้ใช้ และวันนี้ผมจะพาทุกคนมาเพิ่มประสบการณ์การใช้งานให้กับผู้ใช้งานเว็บไซต์ของเราด้วยการซ่อนแถบ Navbar ขณะที่ผู้ใช้งานเลื่อนหน้าจอแบบง่ายๆ ด้วยไลบรารีที่มีชื่อว่า React Headroom กันนะครับ จะเป็นยังไงนั้นก็ไปลุยกันเลย!!!

เขียนโดย

Aphinan Janta

Dev Init Frontend

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 25 เมษายน 2024

Share Tweet

React Headroom คืออะไร?

React Headroom เป็นไลบรารีของ React ที่มี Component ที่สามารถช่วยจัดการซ่อนหรือแสดงส่วนของ Navbar เมื่อ ผู้ใช้ทำการเลื่อนหน้าจอขึ้นหรือลงนั้นเอง

วิธีการติดตั้ง

เราสามารถติดตั้งผ่าน npm หรือ yarn ได้โดยใช้คำสั่งนี้

npm i react-headroom

หรือ

yarn add react-headromm

วิธีการเรียกใช้งาน

เมื่อติดตั้งเสร็จสิ้นแล้วเราสามารถเรียกใช้แบบง่ายๆโดย

// import Headroom มาใช้งาน
import Headroom from "react-headroom";

function App() {
  return (
    <>
      {/* ใช้ Headroom ครอบ Navbar */}
      <Headroom>
        {/* ส่วนของ Navbar ของเรา */}
        <nav className="navbar bg-primary">
          <div>
            <a className="btn btn-ghost text-xl text-white">React Haedroom</a>
          </div>
        </nav>
      </Headroom>
      <main>
        {/* ส่วนของเนื้อหาในเว็บ */}
      </main>
    </>
  );
}

export default App;

เพียงเท่านี้เราก็จะสามารถซ่อน Navbar ขณะที่เลื่อนหน้าจอได้แล้ว

และยังมี Props อื่นๆ ที่สามารถใช้งาน

• downTolerance กำหนดค่าความสูงที่ผู้ใช้ต้องเลื่อนลงในการซ่อน Navbar (ค่าเริ่มต้นคือ 0)

<Headroom downTolerance={10}>
  {/* เนื้อหา */}
</Headroom>

• upTolerance กำหนดค่าความสูงที่ผู้ใช้ต้องเลื่อนขึ้นในการแสดง (ค่าเริ่มต้นคือ 0)

<Headroom upTolerance={5}>
  {/* เนื้อหา*/}
</Headroom>

• onPin ใช้สำหรับกำหนดฟังก์ชันที่จะเรียก Navbar ถูกตรึงไว้บนด้านบนของหน้าจอ

<Headroom onPin={() => console.log('pinned')}>
  {/* เนื้อหา */}
</Headroom>

• onUnpin ใช้สำหรับกำหนดฟังก์ชันที่จะเรียกเมื่อ Navbar ถูกยกเลิกการตรึงบนด้านบนของหน้าจอ

<Headroom onUnpin={() => console.log('unpinned')}>
  {/* เนื้อหา */}
</Headroom>

• wrapperStyle ใช้สำหรับกำหนดสไตล์ CSS ให้กับ wrapper ของ React-Headroom

<Headroom wrapperStyle={{ background: 'black' }}>
  {/* เนื้อหา */}
</Headroom>

• disable ใช้เพื่อปิดการทำงานของ React-Headroom โดยระบุค่า true เมื่อต้องการปิดการทำงาน

<Headroom disable={true}>
  {/* เนื้อหา */}
</Headroom>

• pinStart มีความสูงเป็น px ซึ่งใช้สำหรับกำหนดค่าของพื้นที่ด้านบนของ Navbar มีประโยชน์เมื่อมี Component อื่นอยู่เหนือ Navbar นั้นเอง

<Headroom pinStart={300}>
  {/* เนื้อหา */}
</Headroom>

นอกจากนี้ยังมี props อื่นๆ เพิ่มเติมที่เราสามารถใช้งานได้สามารถอ่านข้อมูลเพิ่มเติมที่ React Headroom

ประสบการณ์การใช้งานที่จะผู้ใช้ได้รับ ✨

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

สรุป

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

อ้างอิง

1. React Headroom วิธีการติดตั้งและ Props ต่างๆ สืบค้นเมื่อเมื่อวันที่ 23 เมษายน 2567
   จาก: kyleamathews.github.io/react-headroom
2. วิธีการใช้งาน สืบค้นเมื่อเมื่อวันที่ 23 เมษายน 2567
   จาก: https://github.com/KyleAMathews/react-headroom