Cố định thanh Menu (Sticky Menu) và Widget khi cuộn trang cho Blogger

"Sticky" Floating Menu & Widget in Blogger

Vào một số website các bạn sẽ thấy thanh menu hoặc 1 số widget nhất luôn cố định khi cuộn trang, người ta gọi đó "Sticky Menu hoặc Widget". Việc giữ cố định Menu hoặc Widget như vậy rất tiện dụng cho các thao tác của độc giả. Bạn không cần phải cuộn chuột lên đầu trang để lựa chọn các mục của Menu hoặc Widget qua đó giúp giảm bớt các thao tác không cần thiết và tăng lượng tương tác với bạn đọc. Có một lưu ý nhỏ các bạn không nên sticky các banner quảng cáo vì có thể vi phạm chính sách của họ, ví dụ như Google Adsense.

Sticky Widget

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn script dưới đây vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1");
//]]>
</script>

Với #HTML1 là ID của widget bạn cần dán cố định.

Xem thêm: Cách xác định ID của một Widget trong Blogger

2Tìm đến thẻ ]]></b:skin> và dán đoạn CSS dưới đây vào trước thẻ đó.

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML1 .widget-content {padding:0;margin:auto;}

• DEMO

Xem thêm: Sửa lỗi Sticky Widget chồng lấn vào Footer

Sticky Menu

1Trước tiên bạn cần xác định Class hoặc ID chứa menu, ví dụ #menu

Xem thêm: Cách xác định ID của một Widget trong Blogger

2Vào Mẫu >> Chỉnh sửa HTML và dán đoạn jQuery dưới đây vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
// Sticky Menu
$(function() {
  var top = $('#menu').offset().top - parseFloat($('#menu').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#menu').outerHeight();

  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
        $('#menu').addClass('fixed').removeAttr('style');
      } else {
        $('#menu').removeClass('fixed').css({
          position: 'absolute',
          top: (maxY - top) + 'px'
        });
      }
    } else {
      $('#menu').removeClass('fixed');
    }
  });
});
//]]>
</script>

3Thêm thư viện jQuery dưới đây vào sau đoạn code trên nếu blog của bạn chưa có.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

4Thêm thuộc tính position: absolute; và set vị trí của Menu khi cuộn trang top: 0; bằng cách tìm đến thẻ ]]></b:skin> và dán đoạn CSS dưới đây vào trước thẻ đó.

#menu {
  position: absolute;
  width: 100%;
  max-width: 920px;
  height: 60px;
  margin: auto;
  background: #fc4f3f;
  z-index: 99;
}
#menu.fixed {
  position: fixed;
  top: 0;
  z-index: 99;
}

Chỉnh sửa đoạn code cho phù hợp với website của bạn

• DEMO

Xem thêm: Ẩn Sticky Menu khi cuộn xuống và hiện lại khi cuộn lên cho Blogger

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by arlinadzgn/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm