Cara Menciptakan Navigasi Menjadi Sticky

Sticky sajian navigasi merupakan sebuah sajian blog atau website yang dibentuk menjadi membisu pada tempatnya. Fungsinya merupakan dikala pembaca blog melaksanakan scrool mouse ke bawah dan ke atas, bab yang di sticky akan tetap di tempat.

Bukan hanya pada sajian navigasi, teknik sticky ini juga sanggup diterapkan di widget yang lainnya seusai keinginan.

Berikut merupakan langkah demi langkah membuat Sticky Menu Navigasi.

1. Perhatikan pola CSS Menu Navigasi dan HTML Menu Navigasi berikut:

CSS Menu Navigasi

/* Menu */
.navi{clear:both;display:block;width:100%;font-family:'Roboto', sans-serif;padding:0;margin:0 auto 25px; z-index:9999!important;}.navi ul{background:#fff;margin:0 auto;padding:0;text-align:center;border-radius:5px}.navi li{display:inline-block;margin:15px 0}.navi li a{display:block;color:#000;font-weight:normal;padding:0 11px;font-size:18px;}.navi li a:hover{color:#86dfff !important}

Keterangan:

Advertiser

- Tulisan  .navi yang berwarna biru diatas merupakan bab selector atau widget id yang akan dijadikan sticky.
- Tulisan z-index:9999!important; yang berwarna merah merupakan arahan css yang akan mengatur kerapian sajian navigasi nantinya, semoga tetap rapi walaupun di zoom in-zoom out. maka tambahkan pada css navigasi di template blog anda.

HTML Menu Navigasi

<nav class='navi'>
<ul>
   <li><a expr:title='data:blog.title' href='/' itemprop='url'>HOME></a></li>
         <li><a href='#'>FACEBOOK</a></li>
         <li><a href='#'>ADSENSE</a></li>
        <li><a href='#'>BLOGGER</a></li>
        <li><a href='#'>TWITTER</a></li>
</ul></nav>

Kode diatas hanya untuk memperlihatkan pemahaman kepada anda bahwa yang akan dibentuk sticky itu merupakan sajian navigasi di blog.


2. Copy dan pastekan script dibawah ini sempurna diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
      var sticky_nav_offset_top = $('.navi').offset().top;
      var sticky_nav = function(){
              var scroll_top = $(window).scrollTop();
              if (scroll_top > sticky_nav_offset_top) {
                      $('.navi').css({ 'position': 'fixed', 'top':0, 'left':0 });
              } else {
                      $('.navi').css({ 'position': 'relative' });
              }
       };
       sticky_nav();
       $(window).scroll(function() {
              sticky_nav();
       });
});
</script>

3. Ganti semua kode .navi dengan bab atau widget id yang ingin dijadikan sticky.