Skip to main content

Membuat Sticky Widget Dan Berhenti Di Atas Footer

Tujuan membuat sticky widget yaitu agar widget tersebut selalu tampil ketika halaman digulung ke bawah. Namun jika blog Anda menggunakan footer, maka pemilihan sticky widget ini jangan sampai melebihi footer agar tidak menjadi tumpang tindih antara widget dan footer.

Nah jika Anda memang tengah mencari cara membuat sticky widget yang berhenti di atas footer, Anda bisa mencoba jquery di bawah ini, namun pastikan dulu Anda sudah memasang jquery library di blog Anda berapa pun versinya.

Silahkan 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>

#sticky adalah ID widget yang dibuat sticky, dan #footer adalah ID footer sebagai stoper sticky widget.

Untuk mengatur jarak widget sticky dengan batas atas blog, atur angka pada top pada kode el.css({ position: 'fixed', top: 0 });


Namun jika kita ingin memberikan perlakuan khusus ketika widget menjadi sticky, misalnya mengganti background widget atau lainnya, kita bisa menambahkan class pada widget dan mengaturnya dengan css sehingga menjadi seperti di bawah ini. Ketika widget menjadi sticky maka akan ditambahkan class dan ketika mencapai batas footer maka class tersebut dihilangkan.


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

Kemudian CSS-nya seperti di bawah ini


.intro {
   ..................
   ..................
   ..................
}


Bagaimana, mudah bukan? Selamat mencoba....

Sumber: http://stackoverflow.com/questions/10669175/stop-floating-sticky-sidebar-div-at-footer-almost-working

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB