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
<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-tophoặ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-tophoặc lớp.affix-bottomvới lớp.affix(thiết lậpposition:fixed). At this point, bạn phải thêm thuộc tính CSStophoặcbottomđể đị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
.affixbằ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êmposition:absolutenế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>
<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>
<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
Không có nhận xét nào:
Đăng nhận xét