Cara Membuat Sticky Widget yang Berhenti Tepat di Atas Footer dengan jQuery

Membuat Sticky Widget berhenti di atas footer

Sticky widget dirancang untuk tetap terlihat meskipun pengguna menggulir halaman ke bawah. Namun, jika blog Anda memiliki footer, pastikan pemilihan sticky widget tidak melebihi area footer agar tidak tumpang tindih.

Jika Anda ingin membuat sticky widget yang berhenti tepat di atas footer, Anda bisa menggunakan kode jQuery berikut. Pastikan jQuery library sudah terpasang di blog Anda, tidak peduli versi apa yang digunakan.

Versi 1

Langkah awal simpan jqury di bawah ini di atas kode </body>

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});
//]]>
</script>

Keterangan:

1. #sticky adalah ID widget yang dibuat sticky
2. #footer adalah ID footer sebagai stoper sticky widget.
3. Untuk mengatur jarak antara widget sticky dan batas atas halaman, Anda bisa menyesuaikan nilai pada properti top di kode el.css({ position: 'fixed', top: 0 });

Versi 2

Jika Anda ingin memberikan efek khusus saat widget menjadi sticky, seperti mengubah latar belakang atau elemen lainnya, Anda dapat menambahkan class pada widget dan mengatur tampilannya menggunakan CSS. Dengan cara ini, saat widget menjadi sticky, class tersebut akan ditambahkan, dan begitu widget mencapai batas footer, class itu akan dihapus secara otomatis.

Berikut kodenya

<script>
//<![CDATA[
$(function(){ // document ready
   if ($('#sticky').length) { // make sure "#sticky" element exists
      var el = $('#sticky');
      var stickyTop = $('#sticky').offset().top; // returns number
      var stickyHeight = $('#sticky').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
             el.addClass("intro");
          }
          else {
             el.css('position','static');
             el.removeClass("intro");
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          el.removeClass("intro");
          }
        });
   }
});
//]]>
</script>

Lalu buat kode CSSnya dengan memberikan class .intro

.intro {
   background : ..................
   color : ..................
   ..................
}

Demikian tutorial membuat sticky widget yang berhenti di atas footer. Semoga bermanfaat.