Tạo thanh menu cố định khi cuộn trang cho Blogspot


Hôm nay mình xin giới thiệu với các bạn một thủ thuật blog khá hay - chuyên nghiệp hơn. Mình mod lại thôi. làm menu của bạn trở nên chuyên nghiệp hơn.
Sau đây mình sẽ hướng dẫn các bạn cách làm

Bước 1 : Thêm CSS. Bạn thêm nó trước  ]]></b:skin> nhé:


/* Bắt đầu Stick Nav */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* Kết thúc Stick Nav */

Bước 2 Giờ thì tìm đến đoạn code chứa menu của các bạn. Ví dụ như mình : 

Đặt toàn bộ Code và trong thẻ như trên hình.
<sticknav>
(Đoạn code menu ở đây)
</sticknav>

Thêm đoạn này trước </body>
<script type="text/javascript">
$(document).ready(function() {
var aboveHeight = $('header').outerHeight();    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script> 

Lưu mẫu lại và xem kết quả. Chúc bạn thành công .
Tạo thanh menu cố định khi cuộn trang cho Blogspot Reviewed by Đỗ Quốc Tuấnon 08:08:00 Rating: 5

Không có nhận xét nào:

All Rights Reserve © 2016 Đỗ Quốc Tuấn

GÓP Ý - BÁO LỖI

Tên

Email * (bắt buộc)

Thông báo * (bắt buộc)