Membuat Sticky Widget Dan Berhenti Di Atas Footer

Tujuan menciptakan sticky widget yaitu supaya widget tersebut selalu tampil saat halaman digulung ke bawah. Namun bila blog Anda memakai footer, maka pemilihan sticky widget ini jangan hingga melebihi footer supaya tidak menjadi tumpang tindih antara widget dan footer.

Nah bila Anda memang tengah mencari cara menciptakan sticky widget yang berhenti di atas footer, Anda dapat 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 isyarat </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 yakni ID widget yang dibentuk sticky, dan #footer yakni ID footer sebagai stoper sticky widget.

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

Hasilnya

Namun bila kita ingin menawarkan perlakuan khusus saat widget menjadi sticky, contohnya mengganti background widget atau lainnya, kita dapat menambahkan class pada widget dan mengaturnya dengan css sehingga menjadi menyerupai di bawah ini. Ketika widget menjadi sticky maka akan ditambahkan class dan saat 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 menyerupai di bawah ini

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

Hasilnya

Bagaimana, gampang bukan? Selamat mencoba....

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


Sumber https://www.kompiajaib.com/

Share this post