Code cuộn ngược trang lên sẽ hiển thị stick menu

Thủ thuật Blogspot, thủ thuật WordPress sau đây, AnbiWeb sẽ chia sẻ cho các webmaster những lập trình viên đang thiết kế web chuyên nghiệp một tiện ích rất hay. Code cuộn ngược trang lên trên sẽ hiển thị menu dạng đính trượt trên đầu trang, cuộn trang xuống, menu sẽ bị ẩn giống như giao diện di dộng của website dantri.com.vn

Xem demo stick menu trên tapchivbiz

Cách thực hiện:

Chèn đoạn code sau trên </head>

<script>
var vitri = 0; 
$(window).scroll(function () {
var vitritd = $(this).scrollTop();
if (vitritd > vitri) {
$('.menutopallt').addClass('anmenu').removeClass('hienmenu');
} 
else {
$('.menutopallt').addClass('hienmenu').removeClass('anmenu');
}
vitri = vitritd;
});
</script>

Tiếp tục chèn đoạn CSS sau:

.stuck {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.anmenu {
    margin-top: -130px;
}
.menutopallt {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    transform: translateY(0);
    transform: translate3d(0,0,0);
    transition: .25s transform;
    backface-visibility: hidden;
    background: #b3dca1;
    z-index: 99;
    height: 65px;
}
.heads-up {
  transform: translateY(-6rem);
  transform: translate3d(0,-6rem,0);
}

Đoạn code trên đều thực thi tốt với những ai đang thiết kế template blogspot và thiết kế theme wordpress. Mình đã test trên cả 2 nền tảng này đều chạy khá mượt và tốt.
Nếu bạn chưa thực hiện thành công, vui lòng để lại comment phía dưới để cùng nhau giải đáp.