Sửa lỗi Sticky Widget chồng lấn vào Footer

Sticky Widget Fixed

Ở một bài viết trước Cố định thanh Menu (Sticky Menu) và Widget khi cuộn trang cho Blogger Iris Tips đã chia sẻ cho các bạn cách cố định thanh menu và widget khi cuộn trang. Tuy nhiên có một vấn đề phát sinh khi bạn thực hiện thủ thuật sticky widget đó là khi cuôn xuống cuối trang sticky widget sẽ bị chồng lấn với phần Footer hoặc một số widget khác. Vậy làm thế nào để khắc phục điều này, mời các bạn theo dõi bài viết dưới đây.

Cách 1: Dùng CSS

Chúng ta sẽ sử dụng thuộc tính z-index của CSS để làm Footer "nổi" lên trên phần Sticky Widget. Như vậy khi cuộn chuột xuống chân trang phần Sticky Widget sẽ được Footer che lại không bị chồng lấn nữa.

1Đầu tiên các bạn cần xác định ID hoặc class chứa Footer

Xem thêm: Cách xác định ID của các thành phần trong Blogger

2Sau khi đã xác định được ID các bạn hãy vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS này vào trước thẻ ]]></b:skin>

#footer{position:relative;z-index:999;}

Với: #footer là ID chứa phần footer bạn tìm được ở bước 1

• DEMO

Cách 2: Dùng Javascript

2a. Sticky Widget sẽ biến mất khi cuộn đến phần Footer

Các bạn sẽ sửa đoạn code làm Widget Sticky ở bài viết trước thành như sau (tức là xóa hoàn toàn CSS và JS ở bài viết trước và thêm CSS và JS ở bài viết này vào)

1Đối với CSS các bạn vào Chủ đề >> Chỉnh sửa HTML và dán trước thẻ ]]></b:skin>

#HTML1 .widget-content{margin:auto}
#HTML1 .widget-content .fixed{position:fixed;top:20px}

2Còn Javascript thì hãy dán trước thẻ </body> bạn nhé.

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

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

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

Với: #footer và HTML1 lần lượt là ID chứa phần footer và ID Sticky Widget.

• DEMO

2b. Sticky Widget sẽ dừng lại khi cuộn đến phần Footer

1Ở cách này phần code làm Sticky các bạn vẫn thực hiện theo đoạn code ở bài viết trước và hãy thêm đoạn Javascript sau đây vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
//Sticky Fixed
$(function(){if($("#HTML1").length){var o=$("#HTML1"),t=$("#HTML1").offset().top,i=$("#HTML1").height();$(window).scroll(function(){var s=$("#footer").offset().top-i-50,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:20}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
//]]>
</script>

Với: #footer và HTML1 lần lượt là ID chứa phần footer và ID Sticky Widget.

• DEMO

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 Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm