Cara Membuat Menu Melayang saat di Scroll

Tutorial berikut ini adalah tentang bagaimana membuat menu navigasi tetap berada pada posisinya meskipun halaman digulir / di scroll, atau sering juga disebut menu navigasi melayang dan dalam dunia blogging namanya sticky navigation.

Kenapa menu harus dibuat sticky? Alasan paling logis adalah agar pengunjung blog tidak perlu repot dalam mencari menu blog meskipun sedang berada di dasar terbawah sebuah halaman blog, sehingga memudahkan pengunjung blog atau web untuk menjelajahi seluruh isi blog lewat menu navigasi yang kita buat posisinya menjadi fixed menu atau tetap.

Untuk memulai tutorial ini, blog anda harus memiliki fitur menu yang nantinya akan di jadikan Sticky Menu Navigation. Jika belum punya anda bisa ikuti salah satu tutorial berikut :

1. Cara Membuat Menu Navigasi Slide Samping di Blog 
2. CaraMembuat Top Menu plus Search Box di Blog.

Jika anda sudah memiliki menu blog yang akan di jadikan sticky navigation, silahkan ikuti tutorial cara membuat menu melayang saat di scroll berikut ini.

1. Masuk ke edit HTML kemudian copy kode jquery di bawah, lalu pastekan tepat di atas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Ket : sebelum di copy paste sebaiknya anda periksa dulu apakah di dalam template anda sudah terdapat kode jquery seperti di atas, jika sudah ada lewati saja langkah pertama.

Tips: lewati saja dulu langkah pertama, jika nanti hasilnya menu masih amblas saat di scroll itu artinya template anda belum memiliki kode jquery di atas.

2. Copy kode javascript di bawah ini, lalu pastekan tepat di atas kode </body>

    <script type='text/javascript'>

      $(document).ready(function() {

        var stickyNavTop = $('#top-menu').offset().top;

        var stickyNav = function(){

          var scrollTop = $(window).scrollTop();

          if (scrollTop > stickyNavTop) {

            $('#top-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });

          } else {

            $('#top-menu').css({ 'position': 'relative' });

          }

        };

        stickyNav();

        $(window).scroll(function() {

          stickyNav();

        });

      });

    </script>

Ket : ganti kode warna merah dengan id top menu milik anda.
Sekedar gambaran, pada umumnya sebuah menu blog memiliki skema kode HTML sebagai berikut :

<div id='top-menu'>

  <nav id='menu'>

    <ul>

      <li><a href='#'>Menu1</a></li>

      <li><a href='#'>Menu2</a></li>

      <li><a href='#'>Menu3</a></li>

    </ul>

  </nav>

</div>

[UPDATE]
Abaikan langkah di bawah ini. Langsung di simpan saja ok. Untuk keterangan, lihat komentar.
3. PENTING!!!
Sebelum di simpan sebaiknya anda klik Format template dulu, setelah template terformat baru klik Simpan template.

Catatan :
Ketika penulis menguji artikel ini, menu navigasi masih amblas saat di scroll bila template di simpan dalam keadaan belum di FORMAT, sebaliknya setelah template di simpan dalam keadaan terformat menu navigasi menjadi melayang.

Sekian tutorial cara membuat menu navigasi melayang di Blog / Web, semoga bisa bermanfaat dan selamat mencoba, Salam Blogger.