Pernah lihat menu bar seperti di cssawards.net? Dalam posting kali ini, saya akan menunjukkan pada Anda bagaimana cara membuat sebuah sticky menu bar mudah dengan hanya beberapa baris kode Javascript dan jQuery.
sticky menu navigasi bar adalah bar yang diletakkan di tempat aslinya di #container pada template, tetapi ketika Anda mulai scroll ke bawah halaman yang panjang, bar itu akan menempel terus di bagian atas jendela browser, berikut ini contoh gambarnya:
Gb.1 - Contoh sebelum di scroll |
Gb.2 - Contoh setelah di scroll |
HTML:
<div id="wrapper"> <header> <h1>Simple Sticky Menu Bar</h1> </header> <nav> Home | Menu 1 | Menu 2 | Menu 3 </nav> <div id="content"> <p>Website content here.</p> </div> </div>
CSS:
body { font-family:Arial, Helvetica, sans-serif; margin:0; background:#ddd; } #wrapper { width:940px; margin: 0 auto; } header { text-align:center; padding:50px 0; } nav { background:#333; color:#fff; height: 30px; width:100%; line-height:30px; position: relative; left:0; text-indent:10px; } #content { background: #fff; height: 1500px; /* presetting the height */ box-shadow: 0 0 5px rgba(0,0,0,0.3); overflow:hidden; } .fixed { position:fixed; }
JQUERY
$(document).ready(function() { //Calculate the height of//Use outerHeight() instead of height() if have padding var aboveHeight = $('header').outerHeight(); // when scroll $(window).scroll(function(){ //if scrolled down more than the header's height if ($(window).scrollTop() > aboveHeight){ // if yes, add "fixed" class to the
gampang kan :D
terima kasih atas informasinya
ReplyDeleteini cara masangnnya gimana aku masih pemula :(
ReplyDeletethanks infonya yah!
ReplyDeletePerlu nyoba nih, Maksih infonya
ReplyDeleteterima kasih sangat membantu kayaknya perlu dicoba nih
ReplyDelete