Kaprikornus alasannya posisinya yang tetap, otomatis instruksi yang di gunakan dalam CSSnya memakai perintah position:fixed
Jika template yang di gunakan tidak Responsive, ini tentu tidak masalah. Namun bagaimana jikalau kita memakai template responsive?
Jika kita memakai template responsive tanpa menambahkan instruksi tertentu, otomatis widget akan saling berhimpitan dengan konten utama. Lalu Apa kita harus menyembunyikan widget terkait pada ukuran layar tertentu?
Agar lebih gampang di pahami, mungkin kau perlu memahami dulu bagaimana cara mencek sebuah blog yang responsive dengan mudah. Silahkan baca dulu Disini.
Ini lah pola instruksi yang di gunakan untuk menciptakan 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 > stickyWidgetTop) { $('.widgetnyo').addClass('tetap'); } else { $('.widgetnyo').removeClass('tetap'); } }; stickyWidget(); $(window).scroll(function() { stickyWidget(); }); }); </script> Keterangan, .widgetnyo ialah Attribut Class yang aku gunakan. Tapi ini tidak berpatok pada Attribut class saja, Attribut ID juga dapat di gunakan untuk fokus pada bab Widget tertentu.
Dan ini instruksi CSS untuk mengatur posisinya,
.tetap { position: fixed; right: 0; top: 0; }Nah, jikalau kita hanya memakai instruksi Javascript dan instruksi CSS di atas, maka pada ukuran tertentu widget akan saling berhimpitan dengan konten utama. Kaprikornus untuk mengatasi hal ini, tentu kita memerlukan instruksi CSS gres yang harus di tempatkan pada selector @media untuk ukuran maksimal layar yang telah kita tentukan.
Ini kodenya,
.tetap { position: relative; right: none; top: none; }Kaprikornus jikalau layar sudah di bawah resolusi yang telah di tentukan maka Widget tidak akan mengambang atau fixed lagi...