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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments