Kết nối

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

5.573 lượt xem 
 Cập nhật lần cuối: 11/01/2017 lúc 00:29:49
Thể loại: Bootstrap, Chưa phân loại 

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.

Liên quan:  Các mẫu trang admin đẹp nhất năm 2018

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.

Trích dẫn bài viết
  • APA:
    Dammio. (2016). [Bootstrap] Phần 28: Affix (phần cuối). https://www.dammio.com/2016/11/03/bootstrap-phan-28-affix.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap] Phần 28: Affix (phần cuối)},
    year = {2016},
    url = {https://www.dammio.com/2016/11/03/bootstrap-phan-28-affix},
    urldate = {2024-03-29}
    }
Theo dõi
Thông báo của
guest
4 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
hungtran
hungtran
7 năm trước

cam ơn rất nhiều

,4464
,4464
6 năm trước

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

,4464
,4464
6 năm trước

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

4
0
Rất thích suy nghĩ của bạn, hãy bình luận.x