Và bài viết này là để hướng dẫn các bạn làm điều đó. Tạo thanh menu cố định (Sticky Menu) khi cuộn trang
Trước khi vào bài viết, mình lưu ý là chỉ áp dụng cho những blog có sẵn thanh điều hướng, hay gọi là thanh điều hướng trang như của mình nha. Còn nếu không có thì bạn có thể tạo ra nó, bằng cách… đợi bài hướng dẫn tiếp theo của mình. ))
– Đầu tiên phải tạo CSS cho nó, bạn vào Chỉnh sửa HTML là thêm đoạn CSS này vào thẻ ]]> nhé
/* Start Stick Nav */
thanh điều hướng {
lai lịch. #ffffff;
Chiều cao. 30px;
chiều rộng. 100%;
lề phải. 0px;
lề trái. 0px;
trái. 0px;
đúng. 0px;
Chức vụ. liên quan đến;
chỉ số z. 9999;
}
vị trí cố định. đã sửa;}
/* Ended Stick Nav */
2 cái bên trong dấu /* */ chỉ dùng để báo cho bạn biết mã bên trong nó nói về cái gì thôi, nên không cần quan trọng đâu ^^
Xem thêm. Hướng dẫn tạo widget cố định khi cuộn trang
– Giờ thì tìm đến đoạn mã chứa thanh điều hướng của các bạn, ví dụ như của mình thì chính là đoạn mã chứa thanh điều hướng này
Vui lòng đặt toàn bộ mã của thanh điều hướng vào trong thẻ
(Đoạn mã của thanh điều hướng ở đây)
– Cuối cùng là đặt đoạn mã này trên thẻ
nếu ($(cửa sổ). scrollTop() > aboveHeight){
$('sticknav'). addClass('đã sửa'). css('top','0′). tiếp theo(). css('padding-top','60px');
} khác {
$('sticknav'). removeClass('đã sửa'). tiếp theo(). css('padding-top','0′);
}
});
});
in which
+ Với đoạn js màu xanh kia. If in blog you have any lines future (Khác phiên bản 1. 6. 4 cũng được) thì bỏ nó đi nhé.
+ Giữ nguyên đoạn màu tím if to integer asthế thì mỗi khi bạn cuộn xuống thì thanh . Còn nếu bạn muốn quyết định khi cuộn xuống bao nhiêu px thì nó mới thành điều hướng cố định, hãy sử dụng mã đoạn này thay cho đoạn đó.
var trênHeight = 300;
Cuối cùng là lưu lại và bạn đã có được menu cố định (Sticky menu) khi cuộn trang rồi đó, nó sẽ nằm trên cùng và trượt theo bạn
Để làm dính menu chúng ta có thể đơn giản hóa bằng cách sử dụng cố định trong css. Tuy nhiên, cách làm này có một số hạn chế nhất định mà bạn sẽ gặp phải trên từng trang web khác nhau
Vì thế hôm nay hanhtinhcongnghe sẽ hướng dẫn cách làm một cuốn menu dính đơn giản nhưng lại hết sức hoàn hảo. Và menu dính này chỉ hiển thị khi bạn di chuyển chuột để kéo lên trang web đầu tiên
Please same hanhtinhcongnghe. bước vào 3 bước làm dính menu đơn giản dưới đây
Bước 1. Kiểm tra cấu trúc html để làm dính menu
Việc đầu tiên các bạn cần làm là kiểm tra xem menu mình cần làm sticky menu nó có cấu trúc như thế nào. Từ đó xác định khung được định nghĩa của nó mà lấy lớp hoặc id cho đúng để thực hiện các bước bên dưới
Bạn đưa chuột vào phần menu trên trang web của mình và nhấp chuột phải lên đó. Sau đó, tiếp theo là nhấn chọn vào “kiểm tra” ở cuối danh sách hiện ra
Lúc này bạn sẽ thấy cửa sổ dev tool hiện ra như bên dưới. Bạn rê chuột để xác định các khung chính xác chứa menu bắt đầu từ đâu và xác định lớp hoặc id của nó
verify html structure of menu
Bước 2
Sau khi xác định được cấu trúc cũng như lớp menu của bạn, như ví dụ trên trang hanhtinhcongnghe này thì lớp sẽ là “header-bottom”. Bạn tiếp tục tiến hành bước 2 này với việc viết một đoạn mã javascript
Bạn yên tâm dưới đây có sẵn code cho bạn mà bạn không cần phải viết lách gì cả. Bạn chỉ cần thay lớp đã tìm thấy ở trên vị trí phù hợp của nó là được
Bạn thay menu lớp của bạn vào ngay phần tôi tô màu đỏ (header-bottom) ở mã bên dưới
//sticky menu
jQuery(document).ready(function(e) {
$(".header-bottom").each(function() {
var e = $(this);
if (e.length > 0) {
var t = $(document).scrollTop(),
a = e.offset().top,
s = e.height(),
r = a + s + s;
$(window).scroll(function() {
var s = $(document).scrollTop();
s > r ? e.addClass("is-fixed") : (s < a || s <= 0) && e.removeClass("is-fixed"),
s > t ? e.removeClass("show") : e.addClass("show"), t = s
})
}
})
});
Trong đoạn code trên khi chạy nó sẽ thêm class show ở class header-bottom. Nếu bạn di chuột xuống bên dưới trang web, lớp hiển thị sẽ bị xóa. Và bạn tiếp tục cuộn cho đến khi vượt qua menu phần, nó sẽ thêm vào lớp tiêu đề-dưới cùng được cố định
Không cần phải nói thì chắc bạn cũng đã biết thêm đoạn javascript này vào đâu rồi vị trí nào trong mã nguồn của trang web của bạn rồi phải không
Bạn có thể kiểm tra hoạt động của đoạn script này bằng cách sử dụng công cụ dev (như hướng dẫn ở bước 1) vì hiện tại bạn không thể thấy nó hiển thị bên ngoài trang
Và đừng rào thêm jquery. js vào nếu trang web của bạn chưa có nhé
Bước 3
Cuối cùng sau khi script đã hoạt động, bạn cần phải thêm css vào để menu dính của bạn hiển thị ra bên ngoài trang web
You open style. css của bạn lên và thêm đoạn css dưới đây vào
Như vậy chỉ với ba bước đơn phía trên trang web của bạn đã có một chức năng dính menu siêu đẹp, siêu mượt. Và nó cũng giúp ích rất nhiều trong việc nâng cao trải nghiệm người dùng trên trang web của bạn
