Scrollspy trong Bootstrap 3 đượ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. Nếu bạn chưa biết cách sử dụng scrollspy như thế nào thì hãy theo dõi bài viết dưới đây nhé.
Cách tạo scrollspy trong Bootstrap 3
Ví dụ sau đây sẽ hướng dẫn bạn cách tạo scrollspy.
<!DOCTYPE html>
<html>
<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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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-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="#">Trang chủ</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">PHP</a></li>
<li><a href="#section2">HTML</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CSS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section3a">CSS3</a></li>
<li><a href="#section3b">Bootstrap 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" style="padding-top:50px;height:500px;color: #fff; background-color: magenta;" class="container-fluid">
<h1>PHP</h1>
<p>PHP cơ bản và nâng cao</p>
</div>
<div id="section2" style="padding-top:50px;height:500px;color: #fff; background-color: green;" class="container-fluid">
<h1>HTML</h1>
<p>Học HTML</p>
</div>
<div id="section3a" style="padding-top:50px;height:500px;color: #fff; background-color: yellow;" class="container-fluid">
<h1>CSS3</h1>
<p>Học CSS3 cơ bản đến nâng cao</p>
</div>
<div id="section3b" style="padding-top:50px;height:500px;color: #fff; background-color: pink;" class="container-fluid">
<h1>Boostrap 3</h1>
<p>Tự học Boostrap 3</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.
Menu cuộn theo chiều dọc
Trong ví dụ sau đâ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.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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;} #section3 {color: #fff; background-color: #ff9800;} #section41 {color: #fff; background-color: #00bcd4;} #section42 {color: #fff; background-color: #009688;} @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">PHP</a></li> <li><a href="#section2">HTML</a></li> <li><a href="#section3">MYSQL</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">CSS<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">CSS3</a></li> <li><a href="#section42">BOOTSTRAP</a></li> </ul> </li> </ul> </nav> <div class="col-sm-9"> <div id="section1"> <h1>PHP</h1> <p>Thử cuộn phần này và nhìn vào danh sách điều hướng khi cuộn!</p> </div> <div id="section2"> <h1>HTML</h1> <p>Thử cuộn phần này và nhìn vào danh sách điều hướng khi cuộn!</p> </div> <div id="section3"> <h1>MYSQL</h1> <p>Thử cuộn phần này và nhìn vào danh sách điều hướng khi cuộn!</p> </div> <div id="section41"> <h1>CSS3</h1> <p>Thử cuộn phần này và nhìn vào danh sách điều hướng khi cuộn!</p> </div> <div id="section42"> <h1>BOOTSTRAP</h1> <p>Thử cuộn phần này và nhìn vào danh sách điều hướng khi cuộn!</p> </div> </div> </div> </div> </body> </html>
Lời kết:
Vậy là bài viết trên đã giúp chúng ta biết cách tạo các scrollspy trong Bootstrap 3 như thế nào rồi đấy. Bạn có thể áp dụng các scrollspy này vào mục lục hay chuyên đề hỏi đáp của mình cho web thêm sinh động nhé. Chúc các bạn thành công!
