Cara Membuat Menu Fixed Setelah di Scroll Menggunakan Javascript

Sekarang saya bakalan ngasih tutorial. gimana sih, caranya membuat menu fixed setelah di scroll? Atau bisa juga gini, menunya atau navbarnya ikut kebawah waktu kita scroll suatu page atau halaman di web atau blog, terus diem di atas. Begitulah penjelasan singkatnya.

Sekarang kita ke cara pembuatan. Untuk menu nya, kalian ngga usah bikin lagi. Kalian bisa pakai menu kalian  yang sudah ada di blog kalian.

Cara Pembuatan

Langkah pertama: Kopikan Javascript berikut di atas </body> atau </head>

<script type="text/javascript">
//<![CDATA[ 
jQuery(document).ready(function() {
 function isScrolledTo(elem) {
  var docViewTop = jQuery(window).scrollTop(); //num of pixels hidden above current screen
  var docViewBottom = docViewTop + jQuery(window).height();

  var elemTop = jQuery(elem).offset().top; //num of pixels above the elem
  var elemBottom = elemTop + jQuery(elem).height();

  return ((elemTop <= docViewTop));
 }

 var catcher = jQuery('#catcher');
 var sticky = jQuery('#sticky');
 
 jQuery(window).scroll(function() {
  if(isScrolledTo(sticky)) {
   sticky.css('position','fixed');
   sticky.css('top','0');
  } 
  var stopHeight = catcher.offset().top + catcher.height();
  if ( stopHeight > sticky.offset().top) {
   sticky.css('position','absolute');
   sticky.css('top', 'auto');
  }
 });
});
//]]>
</script> 

Format Penulisan

Masih di Edit HTML: Tambahkan element ini diatas menu kamu
<div class="clear" id="catcher"></div>

Perhatikan #sticky didalam Javascript diatas. Sekarang tambahkan kode ini di dalam menu kamu.
id="#sticky"

Atau kalau mau cepet, kamu tinggal ubah yang didalam Javascript diatas dari #sticky menjadi kode menu kamu
Contoh: Kode menu saya adalah "#menu" tinggal kamu ubah #sticky didalam Javascript tersebut menjadi #menu. Mudahkan?


Untuk DEMO nya di bawah ini gan Selesai sudah Tutorial kali ini. Semoga bermanfaat dan Layak untuk digunakan. Terimakasih.