10 March 2014

Cara Membuat Sticky Menu Melayang di blog

Sticky Menu

Cara Membuat Menu Melayang (Sticky Menu) di Blog - Sebelumnya saya sudah memberi tutorial Cara Membuat Sticky Widget di Sidebar blog dan sekarang saya akan memberikan tutorial yang juga dinamakan (Sticky) atau mengikuti, yang bernama Sticky Menu 

Dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.

Simpan kode ini di atas </body> dan tentukan selectornya (pada script dibawah saya aplikasikan pada #header-wrapper).

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu #header-wrapper
    var stickyNavTop = $('#header-wrapper').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#header-wrapper').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
Demo

Memunculkan Menu Setelah di Scroll

Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu #header-wrapper
    var stickyNavTop = $('#header-wrapper').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#header-wrapper').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Itulah Tutorial ''Cara Membuat Sticky Menu Melayang di Blog'' jangan lupa follow dan pasang banner/link Exchange disini -------  ( Glade Lands ) -------

 Source : http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic