Fixed header khi kéo chuột xuống dưới

Đoạn code bên dưới sẽ giúp bạn tạo hiệu ứng fixed header khi kéo chuột xuống dưới, lúc này header sẽ luôn luôn hiển thị cho người dùng. Với tính năng này thì người dùng có thể dễ dàng thấy được các link hữu ích trong menu ở header.

// Fixed header
(function () {
    const siteHeader = $(".site-header");
    const distanceToTop = siteHeader.offset().top;

    $(window).on("scroll", (event) => {
        var y = $(window).scrollTop(); // find current scroll position

        if (y >= distanceToTop) {
            siteHeader.addClass("fixed");
        } else {
            siteHeader.removeClass("fixed");
        }
    });
})();

Fixed header khi kéo chuột xuống dưới

Bạn thêm đoạn code bên trên vào trong tập tin js của giao diện hoặc plugin, và phải load kèm theo thư viện jquery tích hợp sẵn trong WordPress. Đối với css thì bạn có thể thêm các thuộc tính như sau:

.site-header.fixed {
    background-color: #fff;
    box-shadow: 0 0 6px 1px rgb(29 17 51 / 4%), 0 0 8px 2px rgb(9 32 77 / 12%), 0 0 5px -3px rgb(29 17 51 / 12%);
    padding-top: 9px;
    padding-bottom: 9px;
}

.site-header {
    padding: 20px 0 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    pointer-events: none;
    left: 0;
}

.admin-bar .site-header {
    top: 32px;
}

Sau khi đã tùy biến xong css và js thì bạn sẽ được kết quả header như hình ảnh bên dưới:

Fixed header khi kéo chuột xuống dưới
Fixed header khi kéo chuột xuống dưới

Hy vọng rằng với đoạn code ngắn này có thể giúp ích được cho bạn. Hãy liên hệ với dịch vụ thiết kế website WordPress của Lại Đình Cường và HocWP Team để được tư vấn miễn phí nhé. Và đừng quên nhấn đăng ký kênh YouTube Học WordPress để được cập nhật các video mới nhất về thủ thuật và cách phát triển WordPress.

3/5 - (2 bình chọn)

Lại Đình Cường

Tôi làm quen và phát triển WordPress từ năm 2008, cho đến nay thì đã có hơn 13 năm kinh nghiệm, thật không thể tin được. Tôi có đam mê và dành nhiều thời gian làm việc với WordPress mỗi ngày, hiện tại tôi đang phát triển giao diện và plugin cho WordPress.

Nếu bạn đang cần người làm trang web bằng WordPress? Hãy liên hệ với tôi ngay để được tư vấn nhé.