Membuat Sticky Widget Dan Berhenti Di Atas Footer

Membuat Sticky Widget Dan Berhenti Di Atas Footer

Bola Hero Gawai

Membuat Sticky Widget Dan Berhenti Di Atas Footer

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

23 Comments Add Comment

Saya coba dulu mas
Biasanya saya selalu gagal kalau urusan yang beginian

Balas

Silahkan mas :)

Balas

kang Adhy mau tanya.., kalo mau pasang iklan responsive ditengah gmn caranya ?

Balas

nah nih....cara stickynya berhenti di atas fotter teh kaya gituh, sekalian jawab pertanyaan blogger tentang sticky yang berhenti diatas fotter kaya punya saya....hehe

Balas

Coba kode iklannya jangan di-parse, cukup ganti kode async menjadi async='async' pada js-nya.

Balas

Siippp... jagoan lah kang Lembu mah hehehe...
Tapi saran saya Adsense jangan dibuat sticky kang, beresiko hehehe.... kalau iklan lain boleh :)

Balas
This comment has been removed by the author.

sudah q coba kang, bisa tapi kudu di refresh dulu baru muncul iklannya , hehehe...., apa memang begitu ya ?

Balas

Sekarang....

Coba semua kode adsense jangan di parse lalu hapus semua kode js-nya yang ini dari semua kode adsense.

<script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>

Dan terakhir simpan kode kode js yang ini

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>

Persis di bawah kode ini

</footer>
</div>
</div>

Balas

sudah kang tapi tetep , kudu refresh dulu halamannya baru kluar iklannya...., jadi q tadi cobanya diparse ato gak tetep aja

Balas

Belum begitu paham, kang.. nyimak aja dulu, hehe..

Balas

This's good for blog which has height footer!

Balas

Silahkan kang :)

Balas

Yes it is, you are right... :)

Balas

Mantap kang adhy :)
dicoba dulu, soalnya agak mumet kalo masalah kode ginian.

maaf sebelumnya, ini kok ada template yang mirip ama kang Adhy yaa? hehe
1. http://www.warim.id/
2. http://www.antoncabon.us/

Balas

Hehehe iya, yg warim pakai kompi Indy (premium) dan sudah izin untuk pakai tampilan Kompi Ajaib. Yang mas Anton memang meminta secara khusus template Kompi Ajaib :)

Balas

Oh gitu ya mas adhy :) okedeh mas, update lagii template berkualitas nya yaamas.
kalo boleh request nih, buat template blog yg Simple dan bersih mas.

salam http://syahrulmedia.blogspot.co.id/

Balas

Beruntung sekali mas anton dapat template ini. Hehe

Balas

Keren banget om, jadi pengunjung blog selalu disuguhkan widget utama seperti Author di blog ini ya biar pengunjung blog langsung klik! Thanks ilmunya, coa aku praktekkan om!

www.agenresmiforedi.net

Balas

kapan ya saya dikasih izin makai template yg super keren ini.
masih menunggu izin :)

Balas

pernah coba juga pake sticky, tapi gk lama

Balas

Tuhh Kang Lembu..dengerin apa kata Kang Adhy..jangan kaga nurut ya..hahahahyyy..

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×