[Bootstrap] Phần 27: Scrollspy

545 lượt xem

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.
scrollbar

<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.

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.
vertical_scrollspy

<!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ình luận Facebook

Để lại bình luận

1 Comment on "[Bootstrap] Phần 27: Scrollspy"

Notify of
avatar
1000
Sort by:   newest | oldest | most voted
wpDiscuz