Make Sticky Widget And Stop At The Top Footer

Welcome to DigTheme - Blogger, Wordpress Theme

Preview Download v1 Download v2

Author: Adhy Suriady

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 });

Hasilnya

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 {

   ..................

   ..................

   ..................

}

Hasilnya

Bagaimana, mudah bukan? Selamat mencoba....

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