Cara Membuat Efek Sticky Pada Menubar

Cara Membuat Efek Sticky Pada Menubar - efek sticky digunakan untuk membuat suatu widget yang kita inginkan bisa tetap terlihat karena akan menempel di bagian atas browser ataupun melayang sesuai keinginan admin blog itu sendiri ketika pengunjung melakukan scroll pada page. cara ini biasa digunakan seorang blogger untuk menampilkan suatu widget yang dianggap penting atau dapat memberikan suatu rekomendasi pengunjung untuk melihatnya.

dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. sticky menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah

Menubar Atau Widget Sidebar yang dipilih akan melayang dan berhenti di atas browser saat di scroll

---

Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini :

Tambahkan kode CSS di bawah ini di atas ]]></b:skin>
 
.sticky { position:fixed; top:10px;/* jarak dari atas*/ z-index: 100; }
TAMBAHKAN JAVASCRIPT

---

Simpan kode ini di atas </body>
 
<script type='text/javascript'> $(document).ready(function() { var stickyWidgetTop = $('#HTML7').offset().top; var stickyWidget = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyWidgetTop) { $('#HTML7').addClass('sticky'); } else { $('#HTML7').removeClass('sticky'); } }; stickyWidget(); $(window).scroll(function() { stickyWidget(); }); }); </script>

Demo

Ganti HTML7 dengan ID widget yang akan dibuat sticky. Misalnya : #nav Untuk menubar. Demikian artikel saya tentang Cara Membuat Widget Sticky di Sidebar dan Menubar Blog semoga bermanfaat bagi anda.

Bagikan ke

Facebook Google+ Twitter

Search