IMG-LOGO
Trang Chủ Chủ Đề Bootstrap 4 Scrollspy (Advanced)
× 1) Bootstrap 4 - Giới Thiệu 2) Bootstrap 4 Containers 3) Bootstrap 4 Grids 4) Bootstrap 4 Text/Typography 5) Bootstrap 4 Colors 6) Bootstrap 4 Tables 7) Bootstrap 4 Images 8) Bootstrap 4 Jumbotron 9) Bootstrap 4 Alerts 10) Bootstrap 4 Buttons 11) Bootstrap 4 Button Groups 12) Bootstrap 4 Badges 13) Bootstrap 4 Progress Bars 14) Bootstrap 4 Spinners 15) Bootstrap 4 Pagination 16) Bootstrap 4 List Groups 17) Bootstrap 4 Cards 18) Bootstrap 4 Dropdowns 19) Bootstrap 4 Collapse 20) Bootstrap 4 Navs 21) Bootstrap 4 Navigation Bar 22) Bootstrap 4 Forms 23) Bootstrap 4 Form Inputs 24) Bootstrap 4 Inputs Group 25) Bootstrap 4 Custom Forms 26) Bootstrap 4 Carousel 27) Bootstrap 4 Modal 28) Bootstrap 4 Tooltip 29) Bootstrap 4 Popover 30) Bootstrap 4 Toast 31. Bootstrap 4 Scrollspy (Advanced) 32) Bootstrap 4 Utilities 33) Bootstrap 4 Flex 34) Bootstrap 4 Icons 35) Bootstrap 4 Media Objects 36) Bootstrap 4 Filters (Advanced) 37) Bootstrap 4 - Form đăng ký tài khoản người dùng

Bootstrap 4 Scrollspy (Advanced)

by GokiSoft.Com - 19:26 12/10/2020 1,388 Lượt Xem

Bootstrap 4 Scrollspy

Scrollspy được sử dụng để tự động cập nhật các liên kết trong danh sách điều hướng (navigation list) dựa trên vị trí scroll.



Cách để tạo một Scrollspy

Ví dụ sau đây cho thấy cách tạo một scrollspy:

Ví dụ

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

Giải thích ví dụ

Add data-spy="scroll" cho phần tử gọi là "scrollable area" - vùng có thể cuộn (thường là phần tử <body>).

Sau đó add thuộc tính data-target=".navbar để đảm bảo rằng navbar được kết nối với scrollable area.

Lưu ý rằng phần tử scrollable có ID phải trùng với các link bên trong list items của navbar (<div id="section1"> với <a href="#section1">).

Thuộc tính data-offset chỉ định số lượng pixel cần bù từ trên xuống khi tính toán vị trí scroll. Nó rất hữu ích khi bạn cảm thấy links bên trong navbar thay đổi trạng thái active quá sớm hoặc quá muộn khi nhảy tới thành phần scrollable tiếp theo. Mặc định là 10 pixels.

Yêu cầu relative positioning: Phần tử với data-spy="scroll" yêu cầu thuộc tính position CSS, với giá trị là "relative".


Scrollspy Vertical Menu

Trong ví dụ này, chúng ta sử dụng Bootstrap's vertical navigation pills (Navbar dọc) với vai trò là menu bên trái:

Ví dụ

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

  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">Section 1</a>
          </li>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the menu while scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body>

Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!