Người Viết : ViKiMi Editor

Hướng dẫn sử dụng Bootstrap JS Affix để thiết kế Website đẹp mắt nhất & dễ dàng
Thiết kế những Menu có vị trí cố định trên màn hình thiết bị hiển thị Website, đó có thể là các vị trí cố định luôn hiển thị tại vị trí Top / Trên đỉnh của màn hình hoặc tại vị trí Bottom / Dưới cùng của màn hình, đã quá trở nên quen thuộc. Điều này có nghĩa là dù khi bạn Cuộn / Scroll Website trên màn hình thiết bị thì Menu luôn được hiển thị cố định tại vị trí Top hoặc Bottom.
Điều này có thực sự khó không?
Câu trả lời là không khó. Với Bootstrap bạn có thể làm nó một cách dễ dàng và không chỉ dừng lại ở đó. Bootstrap còn cung cấp cho bạn thực hiện điều này với mọi phần tử trên Website.
Chỉ cần bạn chọn lựa phần tử và thực hiện cố định vị trí hiển thị cho phần tử mong muốn. Kết quả sẽ có : khi bạn thực hiện cuộn Website thì phần tử được lựa chọn sẽ hiển thị cố định tại vị trí yêu cầu.
Bạn có thể tận dụng điều này để thực hiện với :
+ Nút chia sẻ mạng xã hội
+ Menu Danh Mục của Bài Viết
+ Hiển thị phần nội dung trọng tâm luôn có trên màn hình
+ Hiển thị Menu Điều hướng trên màn hình
[etc…]
VẬY ĐIỀU GÌ GIÚP CHÚNG TA THỰC HIỆN ĐIỀU NÀY
BOOTSTRAP cung cấp cho chúng ta BOOTSTRAP JS Affix để hiện thực hoá một cách dễ dàng.
Đây là một Plugin cho phép chúng ta dễ dàng gắn bất kỳ phần tử nào vào vị trí khu vực trên trang Web. Plugin này hữu ích đến mức bạn có thể sử dụng nó mà không còn lo lắng phải Coding khó khăn thế nào. Hiệu quả đạt được là hoàn hảo, phần tử được lựa chọn sẽ luôn cố định tại 1 vị trí trong khi trang Web được cuộn lên hay xuống.
1 ) TỔNG QUAN :
BOOTSTRAP JS Affix có chứa ba Class : .affix ; .affix-top ; .affix-bottom
Khi bạn thực hiện Cuộn trang Web, Affix sẽ tự động thay thế các Class này với nhau, để có kết quả là phần tử được cố định tại một vị trí (Trên cùng của màn hình / Dưới cùng của màn hình).
Ví Dụ :
+ Thay thế Class .affix-top bằng Class .affix
+ Thay thế Class .affix-bottom bằng Class .affix
+ Thay thế Class .affix bằng Class .affix-top
[ etc… ]
Tuy nhiên, điều này bạn có thể chưa cần quan tâm ngay vì cách thực hiện BOOTSTRAP JS Affix mới là điều cần phải biết trước tiên.
2 ) THỰC HIỆN :
Đê thực hiện BOOTSTRAP JS Affix có thể làm bằng 2 cách sau :
2.1 ) Cách 1 :
Chúng ta có các tuỳ chọn, đây là các tuỳ chọn chúng ta cần thêm vào phần tử muốn tạo hiệu ứng. Với cách 1, chúng ta sẽ thêm các tuỳ chọn trực tiếp vào phần tử thẻ HTML:
+ data-spy=”affix” : Thêm vào phần tử bạn muốn định vị trí
+ data-offset-top = “number” : Tính khoảng cách vị trí so với phần trên cùng của màn hình / Ví trí Cuộn
+ data-offset-bottom=”number” : Tính khoảng cách vị trí so với phần dưới cùng của màn hình / Ví trí Cuộn
THÊM VÀO THUỘC TÍNH CỦA THẺ HTML :
TRƯỜNG HỢP 1 : Định vị trí trên cùng của màn hình
<div class="container-fluid" style="height : 150px;" > <h1> Bootstrap JS Affix </h1> <h3> Cố định (sticky) phần tử Sidenav khi cuộn </h3> <span> Hãy Cuộn để thấy hiệu ứng Cố định PTu có data-spy="affix". </span> </div> <br> <div class="container"> <div class="row"> <nav class="col-sm-4"> <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="150" > <li class="active"><a href="#section1"> Liên Kết Nội Dung 1 </a></li> <li><a href="#section2"> Liên Kết Nội Dung 2 </a></li> <li><a href="#section3"> Liên Kết Nội Dung 3 </a></li> <li><a href="#section3"> Liên Kết Nội Dung 4 </a></li> </ul> </nav> <div class="col-sm-8"> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> </div> </div> <!---End .row---> </div>
TRƯỜNG HỢP 2 : Định vị trí dưới cùng của màn hình
<div class="container-fluid" style="height : 150px;" > <h1> Bootstrap JS Affix </h1> <h3> Cố định (sticky) phần tử Sidenav khi cuộn </h3> <span> Hãy Cuộn để thấy hiệu ứng Cố định PTu có data-spy="affix". </span> </div> <br> <div class="container"> <div class="row"> <nav class="col-sm-4"> <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-bottom = "50" > <li class="active"><a href="#section1"> Liên Kết Nội Dung 1 </a></li> <li><a href="#section2"> Liên Kết Nội Dung 2 </a></li> <li><a href="#section3"> Liên Kết Nội Dung 3 </a></li> <li><a href="#section3"> Liên Kết Nội Dung 4 </a></li> </ul> </nav> <div class="col-sm-8"> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> </div> </div> <!---End .row---> </div>
2.1 ) Cách 2 :
Chúng ta cũng có các tuỳ chọn Affix giống như trên.
Nhưng cách thực hiện 2 chúng ta sẽ sử dụng Javascript để thêm các tuỳ chọn này vào phần tử được chọn. Cách này khá ngắn gọn, và có thể kết hợp với các xử lý của Javascript. Chính điều này sẽ làm cho Code thực sự mạnh và uyển chuyển hơn.
Mã HTML & jQuery :
TRƯỜNG HỢP 1 : Định vị trí trên cùng của màn hình
<body> <div class="container-fluid" style="height : 150px;"> <h1> Bootstrap JS Affix </h1> <h3> Cố định (sticky) phần tử Sidenav khi cuộn </h3> <span> Hãy Cuộn để thấy hiệu ứng Cố định PTu có data-spy="affix". </span> </div> <br> <div class="container"> <div class="row"> <nav class="col-sm-4"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#section1"> Liên Kết Nội Dung 1 </a></li> <li><a href="#section2"> Liên Kết Nội Dung 2 </a></li> <li><a href="#section3"> Liên Kết Nội Dung 3 </a></li> <li><a href="#section3"> Liên Kết Nội Dung 4 </a></li> </ul> </nav> <div class="col-sm-8"> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> <h1>Content được hiển thị của phần nội dung </h1> </div> </div> <!---End .row---> </div> <script> $(document).ready(function(){ $('.nav').affix({offset: {top: 150} }); }); </script> </body>
TRƯỜNG HỢP 2 : Định vị trí dưới cùng của màn hình
Chúng ta sẽ sử dụng đoạn mã jQuery để có kết quả:
<script>
$(document).ready(function(){
$(‘.nav’).affix({offset: {bottom: 50} });
});
</script>
3 ) CÁC EVENTS CỦA AFFIX :
Như chúng ta thấy ở trên với cách thực hiện số 2, chúng ta có thể sử dụng Mã Javascript để tạo kết quả mong muốn. Chính lợi thế khi sử dụng Javascript đã đem lại một khả năng đó là thêm vào các xử lý cần thiết khi các sự kiện của Affix được phát sinh.
Tất nhiên, nếu bạn sử dụng cách 1 thì vẫn có thể thực hiện các xử lý cần thiết khi sự kiện của Affix phát sinh. Nhưng nó sẽ kém tính đồng bộ hơn về mặt coding.
DANH SÁCH CÁC EVENTS AFFIX :
+ Event ‘affix.bs.affix’
Xảy ra trước khi phần tử chọn được thiết lập vị trí cố định trên khu vực của Website. Bạn có thể bắt sự kiện này và đưa ra các xử lý hữu ích cho tính năng của Website.
Sự kiện này sảy ra : Chẳng hạn khi class .affix-top chuẩn bị được thay thế bằng class .affix
+ Event ‘affixed.bs.affix’
Xảy ra sau khi phần tử chọn được thiết lập vị trí cố định trên khu vực của Website. Bạn có thể bắt sự kiện này và đưa ra các xử lý hữu ích cho tính năng của Website.
Sự kiện này sảy ra : Chẳng hạn khi class .affix-top được thay thế bằng class .affix
+ Event ‘affix-top.bs.affix’
Xảy ra trước khi phần tử trên cùng trở về vị trí lúc đầu ( tức là vị trí ban đầu khi chưa tạo hiệu ứng của BOOTSTRAP JS Affix ) . Bạn có thể bắt sự kiện này và đưa ra các xử lý hữu ích cho tính năng của Website.
Sự kiện này sảy ra : Chẳng hạn khi class .affix chuẩn bị được thay thế bằng class .affix-top
+ Event ‘affixed-top.bs.affix’
Xảy ra sau khi phần tử trên cùng trở về vị trí lúc đầu ( tức là vị trí ban đầu khi chưa tạo hiệu ứng của BOOTSTRAP JS Affix ) . Bạn có thể bắt sự kiện này và đưa ra các xử lý hữu ích cho tính năng của Website.
Sự kiện này sảy ra : Chẳng hạn khi class .affix đã được thay thế bằng class .affix-top
+ Event ‘affix-bottom.bs.affix’
Xảy ra trước khi phần tử dưới cùng trở về vị trí lúc đầu ( tức là vị trí ban đầu khi chưa tạo hiệu ứng của BOOTSTRAP JS Affix ) . Bạn có thể bắt sự kiện này và đưa ra các xử lý hữu ích cho tính năng của Website.
Sự kiện này sảy ra : Chẳng hạn khi class .affix chuẩn bị được thay thế bằng class .affix-bottom
+ Event ‘affixed-bottom.bs.affix’
Xảy ra sau khi phần tử dưới cùng trở về vị trí lúc đầu ( tức là vị trí ban đầu khi chưa tạo hiệu ứng của BOOTSTRAP JS Affix ) . Bạn có thể bắt sự kiện này và đưa ra các xử lý hữu ích cho tính năng của Website.
Sự kiện này sảy ra : Chẳng hạn khi class .affix đã được thay thế bằng class .affix-bottom
EXAMPLE >>
<script>
$(document).ready(function(){
$(‘.nav’).affix({offset: {top: 150} });
$(‘.nav’).on(‘affix-top.bs.affix’, function(){
/** Where to place your code **/
});
});
</script>