Tutorial ; Auto-sticky navbar

Assalamualaikum ♥

gambar hiasa. XD

So this code credit to Hafiz Zulkafly , aku cuma ubah sikit bagi kena dengan mata aku.

copy code ni dan paste kan dekat HTML/Javascript

<style> #sebelum { padding:10px; } #selepas { width:100%; height:50; background:#eee; display:none; position:fixed; top:0; left:0; z-index:999; opacity:1; padding:10px; text-align:center; } .navisatu a { padding:15px; border-bottom:1px solid #eee; border-top:1px solid #eee; background:#fff; text-decoration:none; color:#777; margin:5px; letter-spacing:1px; font-family: 'Pontano Sans', sans-serif; font-size:14px; color:black; text-align:center; } .navidua a { padding:10px; background:#eee; text-decoration:none; color:#777; margin:15px; letter-spacing:2px; text-transform:uppercase; font-family: 'Pontano Sans', sans-serif; font-size:15px; color:black; text-align:center; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <center> <div id="sebelum"> <div class="navisatu"> <a class="" href="http://nurainahanis.blogspot.my">HOME</a> <a class="" http://nurainahanis.blogspot.my/p/about-me.html">ABOUT ME</a> <a class="" href="http://nurainahanis.blogspot.my/p/tutors.html">TUTORIAL</a> <a class="" href="http://nurainahanis.blogspot.my/p/assalamualaikum-mohon-kerjasama-anda.html">ORDER</a> </div> </div> </center> <div id="selepas"> <div class="navidua"> <a class="" href="http://nurainahanis.blogspot.my">HOME</a> <a class="" http://nurainahanis.blogspot.my/p/about-me.html">ABOUT ME</a> <a class="" href="http://nurainahanis.blogspot.my/p/tutors.html">TUTORIAL</a> <a class="" href="http://nurainahanis.blogspot.my/p/assalamualaikum-mohon-kerjasama-anda.html">ORDER</a> </div> </div> <script> $(document).ready(function() { var headerTop = $('#sebelum').offset().top; var headerBottom = headerTop + 10; // Sub-menu should appear after this distance from top. $(window).scroll(function () { var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom if (($("#selepas").is(":visible") === false)) { $('#selepas').fadeIn('fast'); } } else { if ($("#selepas").is(":visible")) { $('#selepas').hide(); } } }); }); </script>

Aku malas nak ubah code apa dah. hahaha. boleh edit mana patut. tak faham boleh tanya. hehe. kbai. nak tengok contoh, macam blog aku ni. korang scroll bawah dia melekat nav bar tu kan? bila naik atas dia ada kat atas. faham tak.

hahaha kbai.