Tạo thanh menu cố định (Sticky Menu) khi cuộn trang cho blogspot
Tạo thanh menu cố định (Sticky Menu) khi cuộn trang cho blogspot là một thủ thuật mà các blogger không thể nào bỏ qua. Thông thường với một số mẫu template thanh menu luôn cố định (top:0) thì khách truy cập sẽ dễ dàng điều hướng trang qua thanh menu. Tuy nhiên với những template khác thì khi cuộn chuột vượt quá vị trí thanh menu mặc nhiên thanh menu sẽ bị ẩn đi, khi đó người dùng lại mất công "leo lên top" để thấy lại thanh menu và đương nhiên là không ổn tí nào
Thủ thuật này giúp bạn giữ lại thanh menu khi người dùng cuộn trang vượt qua nó vừa tạo thẩm mỹ vừa tạo tính chuyên nghiệp.
Trước tiên đăng nhập vào trang quản trị blog của bạn, chuyển chế độ chỉnh sửa HTML và dán đoạn css sau vào trước thẻ ]]></b:skin>
sticknav{height:30px;width:100%;margin-right:0;margin-left:0;left:0;right:0;position:relative;z-index:9999}.fixed{position:fixed}
Đến đây cần đến kĩ năng của bạn 1 chút. bạn cần tìm đoạn HTML chứa toàn bộ thanh menu muốn cố định và đặt nó trong cặp thẻ sticknav. Form sẽ như sau
<sticknav>Chèn thư viện JQuery nếu như template của bạn chưa có
Đoạn code chứa thanh menu của bạn
</sticknav>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
Chèn đoạn js sau trước thẻ đóng </body>để hoàn tất
<script type="text/javascript">
//<![CDATA[
$(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>
Trong đó dòng var aboveHeight = $('header').outerHeight(); quy định khi cuộn trang vượt quá thanh menu thì menu sẽ được ghim lại, theo như kinh nghiệm sửa một vài template tôi thấy quá trình ghim lại không được đẹp cho lắm, vì vậy bạn có thể thay thế dòng đó thành var aboveHeight = XXX; trong đó XXX là khoảng cách (tính bằng pixels) để bắt đầu sticky. Bạn có thể thay đổi sao cho quá trình sticky menu diễn ra mượt mà không bị giật cục
Chúc các bạn thành công !