[Bootstrap] Phần 28: Affix (phần cuối)

581 lượt xem

Trong bài học này chúng ta sẽ học về affix, 1 phần tử cho phép cố định 1 vùng nào đó trên trang web. Thông thường, thanh điều hướng menu hoặc các nút biểu tượng xã hội (share, like, …) được cố định khi nội dung trang web thay đổi khi kéo lên hoặc kéo xuống.

Cách tạo menu ngang dạng affix
Trong ví dụ, chúng ta có 1 thanh menu màu đen, khi cuộn nội dung trang xuống dưới, thì thanh menu này sẽ nhảy lên đầu trang và cố định vị trí ở đó.
affix

<!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>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
  </style>
</head>

<body>

<div class="container-fluid" style="background-color:green;color:#fff;height:200px;">
  <h1>Ví dụ affix - dammio.com</h1>
  <h3>Thanh menu cố định khi thay đổi nội dung</h3>
  <p>Cuộn nội dung màn hình để thấy thanh menu thay đổi vị trí với data-spy="affix".</p>
  <p>Thanh menu sẽ ở vị trí top của trang khi bạn cuộn nội dung xuống dưới.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Dammio.com</a></li>
    <li><a href="#">Thiết kế Web</a></li>
    <li><a href="#">Lập trình Web</a></li>
    <li><a href="#">Tiếng Anh</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
  <h1>Nội dung văn bản</h1>
</div>
</body>
</html>

Giải thích ví dụ
Thêm data-spy=”affix” vào phần tử bạn muốn cố định. Thêm nữa, thuộc tính data-offset-top hoặc data-offset-bottom để tính toán vị trí cuộn.

Cách hoạt động
Affix sử dụng 3 lớp: .affix, .affix-top.affix-bottom. Hai lớp sau thể hiện 1 vị trí của vùng được affix, như trên cùng ở đầu (.affix-top) hoặc dưới cùng ở cuối trang (.affix-bottom). Chúng ta phải thêm các thuộc tính CSS để điều khiển các trạng thái thực, với thuộc tính position:fixed ở lớp .affix. Khi cuộn nội dung làm cho các phần tử affix trở về vị trí thực, nơi được đặc tả bằng 2 lớp .affix-top hoặc affix-bottom với lớp .affix (position:fixed). Trường hợp định nghĩa vùng affix ở dưới cùng trang, chúng ta dùng lớp .affix-bottom với vị trí tương đối (position:absolute).

Như vậy thông qua bài này, các bạn đã học cách tạo 1 vùng cố định trong Bootstrap. Vùng cố định tăng tính tương tác với người dùng, hi vọng bạn áp dụng được kỹ thuật này thành công trong trang web riêng của mình.

Bình luận Facebook

Để lại bình luận

4 Comments on "[Bootstrap] Phần 28: Affix (phần cuối)"

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
hungtran
Khách

cam ơn rất nhiều

,4464
Khách

Menu sẽ bị che đi nếu thay thẻ h1 bằng 1 thẻ img

,4464
Khách

Có thể dùng affix để cố định 1 thẻ div hoặc 1 phần tử theo chiều dọc ko ?

wpDiscuz