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.

cara-membuat-efek-sticky-pada-menubar

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>


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

3 Komentar

Terimakasih BRO !

salam dari www.inspirasimuda.tk
saling berkunjung#

Silahkan berkomentar dan Terima kasih

*Untuk menyisipkan Emoticon, pilih Emoticonnya
*Untuk menyisipkan Kode, gunakan konversi kode

Konversi KodeEmoticon


Copyright © 2013-2014 Rumah No 48 - All Rights Reserved
Back to Top