Tạo bằng: Gemini Toanbingo Link: Menu Sticky Thành Đạt – Google Gemini
Bạn sẽ có 2 menu:
Menu tĩnh (static-menu): Nằm ngay trong bài viết, hiển thị bình thường ở đầu bài.
Menu dính (sticky-menu): Bản sao của menu tĩnh, được ẩn đi (đẩy lên trên màn hình) và chỉ xuất hiện khi bạn cuộn qua static-menu.
Cách này là cách mượt mà nhất, không gây giật lag và không làm thay đổi bố cục trang web.
Bước 1: Cấu trúc HTML
Bạn hãy đặt cả 2 menu vào bài viết (thường là ngay dưới tiêu đề bài viết):
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!-- 1. Menu Tĩnh (Luôn hiển thị ở đầu bài) -->
<div id="static-menu" class="my-menu">
<select onchange="window.location.href=this.value;">
<option value="">-- Chọn Đề Thi (Menu Tĩnh) --</option>
<option value="#de-1">Đề số 1</option>
<option value="#de-2">Đề số 2</option>
</select>
</div>
<!-- 2. Menu Dính (Ẩn mặc định, chỉ xuất hiện khi cuộn) -->
<div id="sticky-menu" class="my-menu sticky-wrapper">
<select onchange="window.location.href=this.value;">
<option value="">-- Chọn Đề Thi (Menu Dính) --</option>
<option value="#de-1">Đề số 1</option>
<option value="#de-2">Đề số 2</option>
</select>
</div>Bước 2: CSS
Bạn dán đoạn CSS này vào mục Custom CSS:Bước 2: CSS
Bạn dán đoạn CSS này vào mục Custom CSS:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
.sticky-wrapper {
position: fixed;
top: -80px; /* Ẩn menu ra ngoài */
left: 50%; /* Căn giữa */
transform: translateX(-50%); /* Căn chính xác giữa màn hình */
/* Thiết kế Kính mờ */
background: rgba(255, 255, 255, 0.4); /* Màu trắng trong suốt 40% */
backdrop-filter: blur(15px); /* Hiệu ứng làm mờ nội dung phía sau */
-webkit-backdrop-filter: blur(15px); /* Hỗ trợ Safari */
/* Bo góc cho menu nổi bật */
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
/* Cấu trúc */
width: 90%;
max-width: 400px; /* Giới hạn chiều rộng để menu tập trung hơn */
padding: 8px;
z-index: 9999;
transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng trượt nảy nhẹ */
}
/* Class hiện menu */
.sticky-wrapper.is-visible {
top: 20px; /* Hiện cách mép trên 20px, nhìn rất tinh tế */
}
/* Định dạng select box cho gọn */
.sticky-wrapper select {
width: 100%;
padding: 10px;
border: none;
background: transparent; /* Trong suốt hoàn toàn */
font-weight: 600;
cursor: pointer;
outline: none;
color: #333;
}Thành đạt đã chỉnh
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
/* Styling chung cho cả 2 menu */
.my-menu select { width: 100%; padding: 6px 6px 6px 10px;; border-radius: 5px; }
.sticky-wrapper {
position: fixed;
top: -80px; /* Ẩn menu ra ngoài */
left: 50%; /* Căn giữa */
transform: translateX(-50%); /* Căn chính xác giữa màn hình */
/* Cấu trúc */
width: 90%;
max-width: 400px; /* Giới hạn chiều rộng để menu tập trung hơn */
padding: 8px;
z-index: 9999;
transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng trượt nảy nhẹ */
}
/* Class hiện menu */
.sticky-wrapper.is-visible {
top: 0px; /* Hiện cách mép trên 20px, nhìn rất tinh tế */
}
/* Định dạng select box cho gọn */
.sticky-wrapper select {
width: 100%;
padding: 6px 6px 6px 10px;
border: none;
font-weight: 600;
cursor: pointer;
outline: none;
color: #333;
border: 1px solid #7f7f7f;
}
Bước 3: JavaScript
Đoạn code này sẽ tính toán vị trí của menu tĩnh. Khi bạn cuộn qua điểm cuối của menu tĩnh, nó sẽ “bật” menu dính lên.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
window.addEventListener("scroll", function() {
var staticMenu = document.getElementById("static-menu");
var stickyMenu = document.getElementById("sticky-menu");
// Tính vị trí của menu tĩnh (cách đỉnh trang bao nhiêu px)
// cộng với chiều cao của chính nó để biết khi nào cuộn qua nó
var triggerPoint = staticMenu.offsetTop + staticMenu.offsetHeight;
if (window.scrollY > triggerPoint) {
stickyMenu.classList.add("is-visible");
} else {
stickyMenu.classList.remove("is-visible");
}
});