3 bước làm sticky menu đơn giản

Để làm sticky menu chúng ta có thể dơn giản bằng việc sử dụng fixed 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ì vậy hôm nay hanhtinhcongnghe sẽ hướng dẫn cách làm một sticky menu đơn giản nhưng lại hết sức hoàn hảo. Và sticky menu này chỉ hiển thị khi bạn cuộn chuột để kéo lên đầu trang web.

Hãy cùng hanhtinhcongnghe.com bước vào 3 bước làm sticky menu đơn giản dưới đây.

Bước 1: Kiểm tra cấu trúc html để làm sticky 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 được khung của nó mà lấy class hoặc id cho đúng để làm 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à click chuột phải lên đó. Rồi tiếp theo là bấm chọn vào “inspect” ở cuối cùng 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 chính xác khung chứa menu bắt đầu từ đâu và xác định class hoặc id của nó.

Bước 2:

Sau khi xác định được cấu trúc cũng như class của menu của bạn, như ví dụ trên trang hanhtinhcongnghe này thì class 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 code 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 class đã tìm thấy ở trên vào vị trí phù hợp của nó là được.

Bạn thay class menu của bạn vào ngay phần tôi tô đỏ (header-bottom) ở code 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 tại class header-bottom. Nếu bạn cuộn chuột xuống dưới trang web thì class show sẽ bị xoá. Và bạn tiếp tục cuộn cho đến khi vượt qua phần menu thì nó sẽ add vào header-bottom class is-fixed.

Không cần 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 source code 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 dev tool (như hướng dẫn ở bước 1) vì hiện tại bạn chưa thể thấy nó hiển thị ra ngoài trang.

Và cũng đừng quyên thêm jquery.js vào nếu website của bạn chưa có nhé.

Bước 3:

Cuối cùng sau khi script đã hoạt động thì bạn cần phải thêm css vào để cho sticky menu của bạn hiện thị ra ngoài trang web.

Bạn mở style.css của bạn lên và thêm đoạn css dưới đây vào.

.header-bottom.is-fixed {
    position: fixed;
    top: -58px;
    left: 0;
    width: 100%;
    z-index: 990;
    backface-visibility: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all .25s ease;
}
.header-bottom.is-fixed.show {
    top: 0;
    opacity: 1;
    visibility: visible;
    margin: 0;
}

Như vậy chỉ với ba bước đơn giản phía trên trang web của bạn đã có một chức năng sticky 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 website của bạn.