[Bootstrap] Phần 27: Scrollspy

Cập nhật lần cuối: 11/01/2017 lúc 00:28:42

Bài viết giới thiệu về cách tạo scrollspy, được dùng để tự động cập nhật liên kết trong danh sách điều hướng dựa trên vị trí cuộn nội dung.

Cách tạo scrollspy
Trong ví dụ sau sẽ hướng dẫn bạn cách tạo scrollspy.

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Dammio.com</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Phần 1</a></li>
          <li><a href="#section2">Phần 2</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Phần 3 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#section3a">Phần 3a</a></li>
              <li><a href="#section3b">Phần 3b</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="section1" style="padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;" class="container-fluid">
  <h1>Phần 1</h1>
  <p>Nội dung phần 1</p>
</div>
<div id="section2" style="padding-top:50px;height:500px;color: #fff; background-color: #673ab7;" class="container-fluid">
  <h1>Phần 2</h1>
  <p>Nội dung phần 2</p>
</div>
<div id="section3a" style="padding-top:50px;height:500px;color: #fff; background-color: #ff9800;" class="container-fluid">
  <h1>Phần 3a</h1>
  <p>Nội dung phần 3a</p>
</div>
<div id="section3b" style="padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;" class="container-fluid">
  <h1>Phần 3b</h1>
  <p>Nội dung phần 3b</p>
</div>
</body>

Giải thích ví dụ:
– Thêm data-spy=”scroll” vào phần tử được dùng là 1 vùng cuộn (thông thường là phần tử body). Sau đó, thêm thuộc tính data-target với giá trị id hoặc tên lớp của thanh điều hướng (.navbar). Điều này chắc chắn navbar được kết nối với vùng cuộn. Lưu ý các phần tử cuộn phải khớp chỉ số id với liên kết bên trong thanh navbar (div id=”section1″ phải khớp với liên kết a href=”#section1″).
– Thuộc tính tùy chọn data-offset đặc tả số pixel tới offset từ top khi tính toán vị trí cuộn. Điều này giúp bạn cảm thấy liên kết bên trong thanh navbar thay đổi thay đổi trạng thái kích hoạt quá sớm hoặc quá muộn khi chuyển đến các phần tử cuộn. Mặc định của giá trị data-offset là 10px.

Liên quan: [Bootstrap] Phần 12: Thanh tiến trình

Menu cuộn theo chiều dọc
Trong ví dụ này, chúng ta tiếp tục tìm hiểu 1 menu cho thể thay đổi vị trí các mục con khi cuộn đến nội dung của mục tương ứng.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative;
  }
  ul.nav-pills {
      top: 20px;
      position: fixed;
  }
  div.col-sm-9 div {
      height: 250px;
      font-size: 28px;
  }
  #section1 {color: #fff; background-color: #1E88E5;}
  #section2 {color: #fff; background-color: #673ab7;}
  #section3a {color: #fff; background-color: #ff9800;}
  #section3b {color: #fff; background-color: #00bcd4;}
  
  @media screen and (max-width: 810px) {
    #section1, #section2, #section3, #section41, #section42  {
        margin-left: 150px;
    }
  }
  </style>
</head>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<div class="container">
  <div class="row">
    <nav class="col-sm-3" id="myScrollspy">

      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#section1">Phần 1 - dammio.com</a></li>
        <li><a href="#section2">Phần 2 - dammio.com</a></li>
        
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Phần 3 - dammio.com<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#section3a">Phần 3a</a></li>
            <li><a href="#section3b">Phần 3b</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9">
      <div id="section1">
        <h1>Phần 1</h1>
        <p>Nội dung phần 1</p>
      </div>
      <div id="section2">
        <h1>Phần 2</h1>
        <p>Nội dung phần 2</p>
      </div>

      <div id="section3a">
        <h1>Phần 3a</h1>
        <p>Nội dung phần 3a</p>
      </div>
      <div id="section3b">
        <h1>Phần 3b</h1>
        <p>Nội dung phần 3b</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Như vậy bài viết giúp chúng ta biết cách tạo các scrollspy trong Bootstrap, bạn có thể áp dụng cách này với nội dung 1 số trang hỏi đáp hay mục lục để đạt được hiệu quả giao diện cao.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2016). [Bootstrap] Phần 27: Scrollspy. https://www.dammio.com/2016/11/02/bootstrap-phan-27-scrollspy.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap] Phần 27: Scrollspy}, year = {2016}, url = {https://www.dammio.com/2016/11/02/bootstrap-phan-27-scrollspy}, urldate = {2024-12-07} }

Kết nối