การใช้งาน Bootstrap 5

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

Scrollspy เป็นฟีเจอร์หนึ่งใน Bootstrap 5 ที่ช่วยให้หน้าเว็บสามารถตรวจสอบและไฮไลท์เนื้อหาที่อยู่บนหน้าจอขณะเลื่อนดูหน้าเว็บ โดย Scrollspy จะผูกกับเมนูนำทาง (Navbar หรือเมนูแบบอื่น ๆ) และแสดงตำแหน่งของเนื้อหาที่แสดงบนหน้าจอในขณะนั้นอย่างชัดเจน ซึ่งเป็นฟีเจอร์ที่มีประโยชน์ในการสร้างเว็บไซต์ที่มีเนื้อหายาวหรือการทำ One-page website ที่มีหลายส่วน

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

Scrollspy ใน Bootstrap 5 สามารถใช้ได้ง่ายโดยทำตามขั้นตอนดังนี้

สร้างโครงสร้าง HTML

เริ่มต้นด้วยการสร้างโครงสร้าง HTML ที่ประกอบด้วยเมนูนำทาง (Navbar) และเนื้อหาที่ต้องการให้ Scrollspy ตรวจสอบ

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrollspy Example</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" tabindex="0">

  <!-- Navbar -->
  <nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
    <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>

  <!-- Content Sections -->
  <div class="container" style="margin-top: 100px;">
    <div id="section1" class="bg-light p-5">
      <h4>Section 1</h4>
      <p>Content for section 1 goes here.</p>
    </div>
    <div id="section2" class="bg-secondary text-white p-5">
      <h4>Section 2</h4>
      <p>Content for section 2 goes here.</p>
    </div>
    <div id="section3" class="bg-light p-5">
      <h4>Section 3</h4>
      <p>Content for section 3 goes here.</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
  • data-bs-spy="scroll": ระบุให้ Scrollspy ทำงานกับหน้าเว็บนี้
  • data-bs-target="#navbar-example": ระบุเป้าหมายที่ Scrollspy จะผูกกับ ซึ่งในที่นี้คือ #navbar-example
  • data-bs-offset="0": กำหนดระยะห่างจากขอบบนของหน้าจอ ขณะเลื่อนเนื้อหา

ตัวอย่างการประยุกต์ใช้งาน Scrollspy

1. ใช้งานกับ One-page Website

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

3. การทำงานร่วมกับ Sidebar หรือ Tab

Scrollspy ยังสามารถใช้กับ Sidebar หรือ Tab ในการแสดงเนื้อหาโดยการเลื่อนแบบแนวตั้ง เช่น

HTML
<div class="row">
  <nav id="sidebar-example" class="col-md-4">
    <ul class="nav flex-column">
      <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 class="col-md-8">
    <div id="item1" class="p-3 bg-light">Content for Item 1</div>
    <div id="item2" class="p-3 bg-secondary text-white">Content for Item 2</div>
    <div id="item3" class="p-3 bg-light">Content for Item 3</div>
  </div>
</div>

3. การประยุกต์ใช้ในเอกสารและบทความยาว

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

ปรับแต่งเพิ่มเติม

เพิ่ม Active Class: สามารถปรับแต่งสไตล์การแสดงผลเมื่อเนื้อหานั้นกำลังแสดงอยู่ได้ โดยเพิ่ม CSS สำหรับ .active ที่จะถูกเพิ่มให้กับลิงก์ที่เกี่ยวข้องในเมนู

CSS
.nav-link.active {
  font-weight: bold;
  background-color: #f0f0f0;
}

กำหนดระยะห่าง (Offset): ปรับค่าของ data-bs-offset เพื่อควบคุมระยะห่างจากขอบบนของหน้าจอที่ Scrollspy จะทำงาน เช่น หากต้องการให้มีระยะห่างจากเมนูที่คงที่ (fixed navigation) สามารถเพิ่มค่า offset ได้ตามต้องการ

สรุป

Scrollspy ใน Bootstrap 5 เป็นเครื่องมือที่ช่วยให้ผู้ใช้สามารถนำทางผ่านเนื้อหายาว ๆ บนหน้าเว็บได้อย่างสะดวก โดยอิงจากการเลื่อนของหน้าเพจ ซึ่งสามารถปรับใช้ได้หลากหลาย ไม่ว่าจะเป็นการสร้างเว็บไซต์แบบ One-page, การใช้งานร่วมกับ Sidebar, Tab หรือเอกสารยาว ๆ

การใช้ Scrollspy ร่วมกับ Bootstrap ไม่เพียงแต่ช่วยเพิ่มประสิทธิภาพของการนำเสนอข้อมูลบนเว็บเท่านั้น แต่ยังทำให้ประสบการณ์ของผู้ใช้ดีขึ้น

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

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