This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Saturday, 30 September 2017

[Blogger] 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>
Đoạn code chứa thanh menu của bạn
</sticknav>
Chèn thư viện JQuery nếu như template của bạn chưa có

<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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Mark Phạm 11/05/2017 06:08:00 PM
    Rất cảm ơn ad về bài viết, mình đã thay var aboveHeight = XXX; và thành công.
    Và thấy rằng nếu XXX= 000 là mượt nhất. <3
    Please wait while i am loading Facebook SDK js