สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Scrollspy

Scrollspy เป็นฟีเจอร์ใน Bootstrap 4 ที่ช่วยให้เว็บไซต์สามารถระบุได้ว่าผู้ใช้เลื่อนหน้าเว็บไปถึงส่วนไหนแล้ว โดยจะอัปเดตลิงก์ในเมนูนำทาง (Navbar) ให้สัมพันธ์กับส่วนของเนื้อหาที่ถูกเลื่อนเข้ามาในมุมมองของผู้ใช้ ฟีเจอร์นี้มักถูกใช้ควบคู่กับเมนูนำทางแบบคงที่ (Fixed Navbar) หรือเมนูนำทางด้านข้าง (Sidebar Navigation) เพื่อช่วยนำทางผู้ใช้ไปยังส่วนต่าง ๆ ของหน้าได้อย่างง่ายดาย

ขั้นตอนการใช้งาน Scrollspy ด้วย Bootstrap 4

1. สร้างโครงสร้าง HTML สำหรับการนำทาง

เริ่มต้นด้วยการสร้างเมนูนำทางที่มีการเชื่อมโยงไปยังส่วนต่าง ๆ ของเนื้อหา โดยการเชื่อมโยงเหล่านี้จะอ้างอิงตาม ID ของแต่ละส่วนในเนื้อหา

HTML
<nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
  </ul>
</nav>

2. สร้างเนื้อหา (Content Sections)

แต่ละส่วนของเนื้อหาที่จะเลื่อนถึงต้องมี ID เพื่อที่จะเชื่อมโยงกับลิงก์ในเมนูนำทาง

HTML
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" class="scrollspy-example">
  <h4 id="section1">Section 1</h4>
  <p>เนื้อหาของ Section 1...</p>
  
  <h4 id="section2">Section 2</h4>
  <p>เนื้อหาของ Section 2...</p>
  
  <h4 id="section3">Section 3</h4>
  <p>เนื้อหาของ Section 3...</p>
</div>

3. ตั้งค่าฟีเจอร์ Scrollspy

เพื่อให้ Scrollspy ทำงานได้อย่างถูกต้อง ต้องเพิ่ม data-spy="scroll" ลงใน container ของเนื้อหา และระบุเมนูนำทางด้วย data-target ที่เชื่อมโยงไปยัง ID ของเมนูนำทาง

ตัวอย่างข้างต้นได้แสดงการใช้ Scrollspy ในการกำหนด data-spy="scroll" และ data-target="#navbar-example" เพื่ออ้างอิงถึงเมนูนำทางที่มี ID เป็น #navbar-example และสามารถเลื่อนผ่านเนื้อหาของแต่ละ section ได้

การใช้งาน Scrollspy ร่วมกับองค์ประกอบอื่น ๆ

การใช้ Scrollspy กับ Navbar แบบ Fixed

เราสามารถใช้ Scrollspy กับเมนูนำทางที่เป็นแบบคงที่ (Fixed Navbar) เพื่อให้ลิงก์ใน Navbar ถูกอัปเดตอัตโนมัติเมื่อผู้ใช้เลื่อนหน้าเว็บ

HTML
<nav id="navbar-example2" class="navbar navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#item1">Item 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#item2">Item 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#item3">Item 3</a>
    </li>
  </ul>
</nav>

<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
  <h4 id="item1">Item 1</h4>
  <p>เนื้อหาของ Item 1...</p>
  
  <h4 id="item2">Item 2</h4>
  <p>เนื้อหาของ Item 2...</p>
  
  <h4 id="item3">Item 3</h4>
  <p>เนื้อหาของ Item 3...</p>
</div>

การใช้ Scrollspy กับ Sidebar (เมนูด้านข้าง)

นอกจาก Navbar แล้ว Scrollspy ยังสามารถนำไปใช้กับเมนูด้านข้างได้เช่นกัน โดยจะทำให้เมนูด้านข้างเลื่อนตามเนื้อหาได้อย่างอัตโนมัติ

HTML
<div class="row">
  <nav id="sidebar-example" class="col-4">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" href="#part1">Part 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#part2">Part 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#part3">Part 3</a>
      </li>
    </ul>
  </nav>

  <div class="col-8">
    <div data-spy="scroll" data-target="#sidebar-example" data-offset="0">
      <h4 id="part1">Part 1</h4>
      <p>เนื้อหาของ Part 1...</p>

      <h4 id="part2">Part 2</h4>
      <p>เนื้อหาของ Part 2...</p>

      <h4 id="part3">Part 3</h4>
      <p>เนื้อหาของ Part 3...</p>
    </div>
  </div>
</div>

การปรับแต่ง Scrollspy

  • data-offset: กำหนดค่าการเลื่อนของ Scrollspy ซึ่งหมายถึงระยะห่างจากด้านบนของหน้าต่างมุมมองในขณะที่เนื้อหาเลื่อนผ่าน
  • active class: เมื่อ Scrollspy ตรวจจับว่ามีส่วนใดของเนื้อหาอยู่ในมุมมองแล้ว ลิงก์ที่เชื่อมโยงกับส่วนนั้น ๆ จะได้รับ class active ทำให้สามารถสไตล์หรือตั้งค่าพิเศษให้กับลิงก์นั้นได้

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ