Giống như trên Boostrap 3 Scrollspy trong Bootstrap 4 được sử dụng để tự động cập nhật các liên kết trong danh sách điều hướng dựa trên vị trí cuộn. Bài học này sẽ hướng dẫn các bạn sử dụng scrollspy Bootstrap 4 như thế nào nhé!
Cách tạo Scrollspy trong Bootstrap 4
Ví dụ dưới đây minh họa cách tạo Scorollspy trong Bootstrap 4 các bạn nhé:
<!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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>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).
- 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″).
- 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.
Yêu cầu vị trí tương đối: Phần tử có data-spy = "scroll" yêu cầu thuộc tính CSS position, với giá trị "tương đối" để hoạt động bình thường.
Menu cuộn theo chiều dọc
Trong ví dụ này, chúng tôi sử dụng các Pill của Bootstrap làm menu dọc
<!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/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> body { position: relative; } ul.nav-pills { top: 20px; position: fixed; } div.col-8 div { height: 500px; } </style> </head> <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> <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> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#section41">Link 1</a> <a class="dropdown-item" href="#section42">Link 2</a> </div> </li> </ul> </nav> <div class="col-sm-9 col-8"> <div id="section1" class="bg-success"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> <div id="section2" class="bg-warning"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> <div id="section3" class="bg-secondary"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> <div id="section41" class="bg-danger"> <h1>Section 4-1</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> <div id="section42" class="bg-info"> <h1>Section 4-2</h1> <p>Try to scroll this section and look at the navigation list while scrolling!</p> </div> </div> </div> </div> </body> </html>
Lời kết:
Vậy là chúng ta đã biết cách tạo các scrollspy trong Bootstrap 4 như thế nào rồi đấy. Nếu website của bạn có những câu hỏi đáp thì việc áp dụng Scrollspy vào là cực kỳ hợp lý. Chúc các bạn thành công!
