Cara Menciptakan Sajian Melayang Dikala Di Scroll

Baca Juga

Tutorial berikut ini yaitu ihwal bagaimana menciptakan sajian navigasi tetap berada pada posisinya meskipun halaman digulir / di scroll, atau sering juga disebut sajian navigasi melayang dan dalam dunia blogging namanya sticky navigation.

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

Untuk memulai tutorial ini, blog anda harus mempunyai fitur sajian yang nantinya akan di jadikan Sticky Menu Navigation. Jika belum punya anda sanggup 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 mempunyai sajian blog yang akan di jadikan sticky navigation, silahkan ikuti tutorial cara menciptakan sajian melayang ketika di scroll berikut ini.

1. Masuk ke edit HTML kemudian copy isyarat jquery di bawah, kemudian pastekan sempurna di atas isyarat </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 isyarat jquery menyerupai di atas, kalau sudah ada lewati saja langkah pertama.

Tips: lewati saja dulu langkah pertama, kalau nanti kesannya sajian masih amblas ketika di scroll itu artinya template anda belum mempunyai isyarat jquery di atas.

2. Copy isyarat javascript di bawah ini, kemudian pastekan sempurna di atas isyarat </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 isyarat warna merah dengan id top menu milik anda.
Sekedar gambaran, pada umumnya sebuah sajian blog mempunyai bagan isyarat 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, sesudah template terformat gres klik Simpan template.

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

Sekian tutorial cara menciptakan sajian navigasi melayang di Blog / Web, semoga sanggup bermanfaat dan selamat mencoba, Salam Blogger.