Sticky header là gì, định nghĩa ngắn gọn nhất
Sticky header (thanh điều hướng dán cố định) là phần header của website tự khóa vị trí phía trên màn hình khi người dùng cuộn trang xuống. Dù bạn kéo xuống bao xa, cái thanh đó vẫn ở đó, luôn trong tầm tay.
Tên gọi khác bạn có thể gặp: fixed header, persistent navigation, hay đơn giản là “menu dán”. Về mặt kỹ thuật, cách phổ biến nhất để tạo ra nó là thuộc tính CSS position: sticky hoặc position: fixed, cả hai đều cho kết quả người dùng nhìn thấy gần như nhau.
Ngược lại với sticky header là static header (thanh điều hướng tĩnh), loại cuộn mất khỏi màn hình khi bạn kéo trang xuống. Muốn quay lại menu phải cuộn ngược lên đầu trang.
Sticky header và static header khác nhau điểm nào?
Lúc trang vừa load, nhìn bề ngoài hai cái trông y hệt. Sự khác biệt chỉ lộ ra khi bạn bắt đầu cuộn.
| Tiêu chí | Sticky header | Static header |
|---|---|---|
| Khi người dùng cuộn xuống | Ở lại phía trên màn hình | Cuộn mất theo trang |
| Truy cập điều hướng | Bất cứ lúc nào | Phải cuộn ngược lên đầu |
| Vùng hiển thị nội dung | Bị che phần chiều cao header | Toàn màn hình là nội dung |
| Phù hợp với | Trang nhiều nội dung, blog, danh mục sản phẩm | Landing page ngắn, trang đích quảng cáo |
| Độ phức tạp kỹ thuật | Cần xử lý thêm anchor link, nền đục | Đơn giản hơn, ít xử lý đặc biệt |
Người dùng cảm nhận sticky header như thế nào?
Đặt mình vào vị trí người đọc một bài blog dài trên điện thoại. Bạn đọc xuống đến giữa bài, muốn chuyển sang mục “Dịch vụ” để xem thêm. Nếu là static header, bạn phải kéo ngược lên đầu trang, bấm vào menu, rồi mới đến được trang muốn. Nếu là sticky header, bạn chỉ cần nhìn lên đầu màn hình, bấm vào, xong.
Cái tiết kiệm nhỏ đó cộng dồn trên nhiều lượt dùng. Nhiều nghiên cứu về UX (trải nghiệm người dùng) cho thấy việc giảm số bước để hoàn thành một hành động thường dẫn tới tỷ lệ chuyển đổi cao hơn, đặc biệt trên thiết bị di động nơi người ta không kiên nhẫn lắm.
Nhưng sticky header cũng dễ gây bực nếu thiết kế không cẩn thận. Trên điện thoại màn hình 6 inch, một cái header cao 80px chiếm tới 12 đến 15% diện tích màn hình. Cứ đọc đến đoạn hay, nhìn lên thấy cái thanh đó đang che một phần nội dung phía trên, người ta mất hứng.
Còn một vấn đề ít người để ý: anchor link bị che. Khi bạn click vào mục lục nội dung để nhảy tới một đề mục, trang nhảy tới nhưng phần tiêu đề của đề mục đó bị sticky header đè lên. Người dùng thấy trang đã dịch chuyển nhưng không tìm được cái mình vừa bấm vào. Cảm giác đó na ná như bạn đến đúng địa chỉ nhưng cửa nhà bị cái biển quảng cáo che mất.
Khi nào thì nên dùng sticky header?
Không có câu trả lời đúng cho mọi trường hợp, nhưng có một số dấu hiệu rõ ràng.
Sticky header hữu ích khi trang của bạn có nhiều nội dung và người dùng cần điều hướng thường xuyên. Blog, trang danh mục sản phẩm, trang tài liệu hướng dẫn, tin tức, đây là những kiểu trang người ta thường cuộn nhiều và cần chuyển mục liên tục. Sticky header ở đây giống như người dẫn đường luôn đứng bên cạnh, hỏi là có ngay.
Ngược lại, landing page và trang đích quảng cáo thường không cần sticky header. Ở những trang này, mục tiêu chỉ có một: đưa người dùng tới hành động cụ thể (điền form, gọi điện, mua ngay). Cái menu luôn hiện trên đó đôi khi chỉ nhắc họ rằng họ có thể đi nơi khác.
Một trường hợp thú vị là trang sản phẩm thương mại điện tử (e-commerce). Một số thiết kế chọn đặt nút “Thêm vào giỏ” ngay trong sticky header, để dù người dùng đang đọc đến thông số kỹ thuật hay đánh giá bên dưới, nút mua hàng vẫn luôn nhìn thấy được. Cách này hiệu quả khi trang sản phẩm đủ dài và tỷ lệ người đọc hết trang trước khi mua cao.
Bạn cũng có thể tham khảo bài về hero section là gì và above the fold là gì để hiểu rõ hơn về cách bố trí phần đầu trang và những gì người dùng nhìn thấy đầu tiên.
Những lỗi phổ biến khi làm sticky header
Header quá cao là lỗi hay gặp nhất. Trên màn hình máy tính, 70 đến 80px là mức ổn. Nhưng trên điện thoại, con số đó đã chiếm quá nhiều không gian. Giải pháp thường thấy là rút gọn sticky header trên mobile xuống còn logo và nút mở menu (hamburger menu), bỏ toàn bộ menu ngang ra ngoài.
Nền trong suốt khi cuộn là lỗi không chỉ xấu mà còn khó đọc. Nếu sticky header dùng nền trong suốt hoặc nửa trong suốt, khi cuộn xuống chữ nội dung sẽ hiện ngay phía sau cái thanh đó. Chữ đè chữ, màu sắc lẫn lộn, người dùng không đọc được. Cách xử lý là thêm box-shadow nhẹ và đặt nền đục hoàn toàn khi header ở trạng thái sticky.
Anchor link bị che là lỗi kỹ thuật cần sửa bằng CSS. Thêm scroll-margin-top hoặc scroll-padding-top bằng đúng chiều cao của sticky header vào các đề mục. Khi người dùng click nhảy tới đề mục, trang tự dừng thấp hơn chiều cao header, không còn bị che nữa.
Animation (chuyển động) rườm rà là lỗi về cảm giác. Một số thiết kế làm sticky header “rớt xuống” từ trên màn hình với animation mỗi khi người dùng cuộn ngược lên. Lần đầu trông hay, từ lần thứ hai trở đi bắt đầu thấy phiền. Animation sticky header nên nhanh gọn dưới 200ms, hoặc không có animation gì hết.
Muốn đọc thêm về các thành phần điều hướng hay nhầm lẫn với sticky header, xem bài hamburger menu là gì và mega menu là gì.
Người không rành kỹ thuật cần quan tâm sticky header ở mức nào?
Bạn không cần biết cách code, không cần hiểu CSS hay JavaScript. Điều bạn cần quyết định là: website của bạn có nhiều nội dung không, người dùng thường xuyên cần chuyển mục khi đang đọc không?
Có một cách kiểm tra đơn giản: mở website của bạn, cuộn xuống khoảng một nửa trang bất kỳ, rồi tự hỏi, nếu muốn chuyển sang mục khác ngay lúc này thì làm thế nào? Nếu câu trả lời là “phải cuộn ngược lên đầu”, đó là dấu hiệu sticky header sẽ giúp người dùng của bạn.
Còn nếu bạn đang xây dựng trang web mới và muốn thiết kế trải nghiệm điều hướng từ đầu cho đúng, dịch vụ thiết kế UI/UX của Web22 có thể đánh giá và tư vấn phần điều hướng cụ thể cho từng loại trang.
Câu hỏi thường gặp về sticky header
Sticky header có làm website chậm hơn không?
Rất ít ảnh hưởng nếu dùng CSS position: sticky. Trình duyệt hiện đại xử lý thuộc tính này ở tầng phần cứng, không can thiệp vào quá trình render trang. Nếu dùng JavaScript để bắt sự kiện scroll và thêm class, tốc độ phụ thuộc vào cách viết code, nhưng cũng không đáng kể nếu xử lý đúng.
Có thể ẩn sticky header khi người dùng cuộn xuống và hiện lại khi cuộn ngược không?
Được, và khá phổ biến trên các trang dài. Kỹ thuật này gọi là smart sticky header hay hide-on-scroll header. Khi người dùng cuộn xuống, header thu nhỏ hoặc ẩn hẳn để nhường màn hình cho nội dung. Khi cuộn ngược lên, header xuất hiện lại ngay lập tức. Cách này cân bằng giữa không gian xem nội dung và tiện lợi điều hướng.
WordPress có sẵn tính năng sticky header chưa hay phải cài thêm?
Phụ thuộc vào theme đang dùng. Hầu hết theme WordPress hiện đại (Astra, Kadence, GeneratePress, Divi…) đều có tùy chọn sticky header trong phần Customizer mà không cần cài thêm plugin. Nếu theme không hỗ trợ, thêm vài dòng CSS vào phần Additional CSS là đủ trong nhiều trường hợp đơn giản.
Sticky header trên mobile và máy tính có cần thiết kế khác nhau không?
Cần. Trên máy tính, sticky header có thể giữ toàn bộ menu ngang. Trên điện thoại, nên rút gọn xuống còn logo và nút hamburger menu để tiết kiệm không gian màn hình. Khi người dùng bấm hamburger, menu mở ra dạng slide-in panel hoặc full-screen overlay bên dưới header đó. Hai thiết bị, hai cách thể hiện, cùng một mục tiêu điều hướng dễ dùng.