NTM Solutions

Facebook Youtube Google+

Thứ Năm, 6 tháng 4, 2017

Tự học Bootstrap - Cơ bản - bài 32 – Menu cố định Affix

Công cụ Affix

Cộng cụ Affix cho phép 01 phần tử bị khóa lại ở 01 khu vực nào đó trong trang web. Ta thường sử dụng hiệu ứng này với menu điều hướng hoặc các nút biểu tượng mạng xã hội , làm cho chúng "dính" ở 01 vị trí định sẵn trong khi cuộn lên hay cuộn xuống.
Ta có thể bật tắt công cụ này bằng cách thay đổi giá trị CSS position từ static thành fixed), tùy thuộc vào vị trí cuộn.
Ví dụ 1: Thanh điều hướng ngang cố định


Ví dụ 2: Thanh menu dọc cố định



Với công cụ Affix, khi bạn cuộn trang lên hoặc xuống , menu luôn hiện ra và cố định tại 01 vị trí.

Cách tạo 01 menu điều hướng dạng ngang

Ví dụ sau cho thấy cách tạo 01 menu điều hướng cố định nằm ngang:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">


Ví dụ sau cho thấy cách tạo 01 thanh menu điều hướng cố định dạng dọc sidebar.
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">


Giải thích ví dụ:

Thêm thuộc tính data-spy="affix" vào phần tử nếu bạn muốn cố định nó.
Bạn cũng có thể thêm thuộc tính data-offset-top|bottom để tính toán vị trí cuộn màn hình trang web.

Phương thức hoạt động

Công cụ affix bật tắt giữa 03 lớp : .affix, .affix-top, và .affix-bottom. Mỗi lớp hiển thị 01 trạng thái. Bạn phải thêm thuộc tính CSS để xử lý vị trí thật sự của trang, với ngoại lệ position:fixed trong lớp .affix
  • Công cụ này thêm lớp .affix-top hoặc lớp .affix-bottom để chỉ ra phần tử nằm ở vị trí trên cùng hoặc dưới cùng. Thuộc tính Position của CSS không đòi hỏi điều này.
  • Cuộn Scrolling past the affixed element triggers the actual affixing – Đây là nơi plugin thay thế lớp .affix-top hoặc lớp .affix-bottom với lớp .affix (thiết lập position:fixed). At this point, bạn phải thêm thuộc tính CSS top hoặc bottom để định vị trí phần tử cố định trong trang web.
  • Nếu bạn thiết lập 01 offset ở đáy, khi bạn cuộn qua nó sẽ thay thế lớp .affix bằng .affix-bottom. Bởi vì offsets are optional, setting one requires you to set the appropriate CSS. Trong trường hợp này, thêm position:absolute nếu cần.
Trong ví dụ đầu: ở phía trên, công cụ Affix thêm lớp .affix (position:fixed) vào thẻ <nav> khi ta cuộn đúng 197 pixels từ vị trí đỉnh. Nếu bạn mở ví dụ, bạn cũng sẽ thấy rằng chúng ta thêm thuộc tính CSS top với 01 giá trị là 0 vào lớp .affix. Điều này đảm bào rằng thanh menu điều hướng lúc nào cũng ở vị trí đỉnh của trang, khi ta cuộn 197 pixels từ đỉnh trang web.

Scrollspy vs Affix

Dùng công cụ Affix kết hợp với công cụ Scrollspy

Menu ngang (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>


Menu dọc (Sidenav)


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

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48