Sticky menu,cố định menu khi cuộn trang cho wordpress

Nếu bạn muốn sticky menu khi cuộn trang trong wordpress hay web html bất kỳ. Chỉ đơn giản là chèn đoạn code sau vào bên trong thẻ </body> và thay đổi thuộc tính bên trong code là xong.

Đoạn code như sau:

/**
code sticky menu - cố định menu khi cuộn trang
 */
<style>
.fixed {
left: 0;
max-width: 100%;
overflow: visible;
position: fixed !important;
top: 0;
width: 100%;
z-index: 1000;
}
</style>
<script>
//Sticky menu
var sticky = document.querySelector('.header-main');
var origOffsetY = sticky.offsetTop;

function onScroll(e) {
    window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
        sticky.classList.remove('fixed');
}
document.addEventListener('scroll', onScroll);
</script>

Không cần dùng bất cứ plugin nào và tương thích với mọi theme wordpress. Bạn mở file footer.php của theme đang sử dụng. Tìm đến dòng </body> và dán đoạn code trên vào.

Thay đổi đoạn .header-main thành thẻ class trong div chứa menu của bạn. Lư lại và tận hưởng kết quả nhé.

Exit mobile version