Cố định một menu của trang web hay một widget của web thường là tính khoảng từ đầu trang web đến menu mà bạn muốn cố định rồi sau đó gán class có thuộc tính position: fixed vào.
Với cách này thì thường bạn phải đi cân đo đóng đếm chính xác vị trí thanh menu của bạn rất phiền phức, tuy nhiên với jquery dưới đây thì mọi thứ đều tự động hoàn toàn, việc của bạn là copy và dán chúng vào đúng vị trí mà thôi.
jQuery(document).ready(function(e) {
var WindowHeight = jQuery(window).height();
var load_element = 0;
//position of element
var scroll_position = jQuery('.site-menu').offset().top;
var screen_height = jQuery(window).height();
var activation_offset = 0;
var max_scroll_height = jQuery('body').height() + screen_height;
var scroll_activation_point = scroll_position - (screen_height * activation_offset);
jQuery(window).on('scroll', function(e) {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > scroll_activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if (element_in_view || has_reached_bottom_of_page) {
jQuery('.site-menu').addClass("is-sticky");
} else {
jQuery('.site-menu').removeClass("is-sticky");
}
});
});
Nhớ thay đổi .site-menu cho phù hợp với website của bạn.
Và dĩ nhiên cũng cần một đoạn css để có thể làm cố định thanh menu sau khi đã có đoạn jquery ưng ý.
.is-sticky {
box-shadow: 0 0 3px rgba(0,0,0,0.9);
height: auto;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10000!important;
}