Sticky Navbar

Xem trước

Mô phỏng một bộ điều hướng cố định dạng thủy tinh với thao tác cuộn. Nhấp vào nút trong bản xem trước để xem hiệu ứng cuộn.

Trường hợp sử dụng và tính năng

• Trang đích/Danh mục đầu tư: Biểu thức của trình điều hướng thay đổi khi bạn cuộn, mang lại cảm giác được thiết kế khéo léo.

• Thích hợp với chủ đề tối: backdrop-filter: blur của Glassmorphism trông đặc biệt đẹp trên nền tối.

• Sử dụng position: sticky: Tối đa hóa hiệu suất bằng cách tận dụng position: sticky trong CSS thay vì chỉ dựa vào JavaScript.

Điểm thiết kế và UX

1. Bắn ở cuộn 10px: Hình thái thủy tinh xuất hiện ở thời điểm trung tính.

2. Thay đổi về phần đệm: Giảm từ 1.25rem to 0.75rem để làm cho nó nhỏ gọn hơn và bảo mật vùng nội dung rộng hơn.

3. Làm mượt với transition: Tạo các thay đổi tự nhiên bằng cách chuyển đổi đồng thời bốn thuộc tính nền, độ mờ, bóng hộp và phần đệm.

Cách tùy chỉnh

Thay đổi ngưỡng bắt đầu cuộn:

// kích hoạt sớm hơn (5px)

if (demo.scrollTop > 5) { ... }



// kích hoạt sau (50px)

if (demo.scrollTop > 50) { ... }

thêm liên kết:

<li><a href="#services">dịch vụ</a></li>

<li><a href="#blog">Blog</a></li>

Mã triển khai

<nav class="snav-bar" id="sticky-nav">

<div class="snav-logo">BRAND</div>

<ul class="snav-links">

  <li><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Work</a></li>

</ul>

<button class="snav-cta">Contact</button>

</nav>



<style>
.snav-bar {

position: sticky;

top: 0;

z-index: 100;

width: 100%;

box-sizing: border-box;

padding: 1.25rem 2rem;

display: flex;

align-items: center;

justify-content: space-between;

gap: 1.5rem;

transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;

}

.snav-bar.scrolled {

background: rgba(15,23,42,0.75);

backdrop-filter: blur(16px);

box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.4);

padding: 0.75rem 2rem;

}
</style>



<script>

window.addEventListener('scroll', function() {

var nav = document.getElementById('sticky-nav');

if (window.scrollY > 10) nav.classList.add('scrolled');

else nav.classList.remove('scrolled');

});

</script>

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích |

|--------|-------|

| Chrome 76+ | ✅ Hoàn toàn tương thích |

| Firefox 103+ | ✅ Tương thích |

| Safari 9+ | ✅ Hoàn toàn tương thích |

| Cạnh 79+ | ✅ Hoàn toàn tương thích |

backdrop-filter không được một số trình duyệt cũ hỗ trợ, nhưng nền bán trong suốt của background: rgba(...) là đủ để dự phòng.