Cara membuat stiky widget tetap responsive

Cara membuat stiky widget tetap responsive

  30 August    Andika

---

Kamu tentu sudah paham dengan istilah stiky widget. Ini akan membuat widget terkait akan terus mengikuti guliran laman blog hingga ke bagian bawah.

Jadi karena posisinya yang tetap, otomatis kode yang di gunakan dalam CSSnya menggunakan perintah position:fixed

Jika template yang di gunakan tidak Responsive, ini tentu tidak masalah. Namun bagaimana jika kita menggunakan template responsive?

Jika kita menggunakan template responsive tanpa menambahkan kode tertentu, otomatis widget akan saling berhimpitan dengan konten utama. Lalu Apa kita harus menyembunyikan widget terkait pada ukuran layar tertentu?

Agar lebih mudah di pahami, mungkin kamu perlu memahami dulu bagaimana cara mencek sebuah blog yang responsive dengan mudah. Silahkan baca dulu Disini.

Ini lah contoh kode yang di gunakan untuk membuat stiky widget pada blog.

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('.widgetnyo').offset().top; 
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();     
if (scrollTop &gt; stickyWidgetTop) { 
    $('.widgetnyo').addClass('tetap');
} else {
    $('.widgetnyo').removeClass('tetap'); 
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

Keterangan, .widgetnyo adalah Attribut Class yang saya gunakan. Tapi ini tidak berpatok pada Attribut class saja, Attribut ID juga bisa di gunakan untuk fokus pada bagian Widget tertentu.

Dan ini kode CSS untuk mengatur posisinya,

.tetap {
  position: fixed;
  right: 0;
  top: 0;
}

Nah, jika kita hanya menggunakan kode Javascript dan kode CSS di atas, maka pada ukuran tertentu widget akan saling berhimpitan dengan konten utama. Jadi untuk mengatasi hal ini, tentu kita memerlukan kode CSS baru yang harus di tempatkan pada selector @media untuk ukuran maksimal layar yang telah kita tentukan.

Ini kodenya,

.tetap {
  position: relative;
  right: none;
  top: none;
}

Jadi jika layar sudah di bawah resolusi yang telah di tentukan maka Widget tidak akan mengambang atau fixed lagi...