Cara Membuat Menu Blog Sticky Ketika di Scroll

1. Pembuatan CSS/Style untuk menu 
2. Pembuatan Media Queris/Screen untuk Tampilan Responsive menunya, pembuatan menu responsive ini pernah dibahas pada artikel Cara Membuat Tampilan Navigasi Menu Website Responsive
3. Penambahan Javascript Untuk Merubah Secara Otomatis Jadi Fixed Ketika di Scroll 
4. Menempatkan Menu
   

*Catatan
Untuk membuat menu ini Anda memerlukan jquery, silahkan tambahkan <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
diatas kode </head>

Berikut ini adalah Cara Membuat Menu Blog Sticky Ketika di Scroll

#TAHAP PERTAMA

Cari script <b:skin><![CDATA[/* dan tambahkan susunan CSS berikut dibawahnya, atau cari script ]]></b:skin>

 <!-- Menu Fixed If Scroll By Ahmad Sigarantang -->
#menuluhur{width:100%;max-width:996px;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menuluhur ul,#menuluhur li{margin:0;padding:0;list-style:none;}
#menuluhur ul{height:45px}
#menuluhur li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;
font-weight:bold;}
#menuluhur a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menuluhur ul li:hover a{color:#666;}
#menuluhur input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menuluhur label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menuluhur label span{font-size:13px;position:absolute;left:35px}
#menuluhur ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menuluhur ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menuluhur ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menuluhur li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menuluhur a.dutt{padding:0 27px 0 14px}
#menuluhur a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menuluhur a.dutt:hover::after,#menuluhur ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menuluhur ul.menux li a{background:#fff;color:#919392;}
#menuluhur ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menuluhur li.facebook {padding:0 5px;}
#menuluhur li.facebook,#menuluhur li.twitter,#menuluhur li.youtube,#menuluhur li.googleplus,#menuluhur li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menuluhur li a.facebook:hover,#menuluhur li a.twitter:hover,#menuluhur li a.youtube:hover,#menuluhur li a.googleplus:hover,#menuluhur li a.linkedin:hover{color:#8493a0;}
#menuluhur li.facebook .fa.fa-facebook,#menuluhur li.twitter .fa.fa-twitter,#menuluhur li.youtube .fa.fa-youtube,#menuluhur li.googleplus .fa.fa-google-plus,#menuluhur li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menuluhur li.facebook:hover,#menuluhur li.twitter:hover,#menuluhur li.youtube:hover,
#menuluhur li.googleplus:hover,#menuluhur li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menuluhur li.facebook:hover .fa.fa-facebook,#menuluhur li.twitter:hover .fa.fa-twitter,#menuluhur li.youtube:hover .fa.fa-youtube,#menuluhur li.googleplus:hover .fa.fa-google-plus,#menuluhur li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

#TAHAP KEDUA

Selanjutnya kita tambahkan media queris supaya tampilan menunya jadi responsive, tambahkan script css dibawah ini dibawah script CSS pada tahap pertama

<!--Menu Fixed If Scroll By Ahmad Sigarantang -->
@media screen and (max-width:960px) {
#menuluhur li:hover > ul.menux{display:block;}
#menuluhur ul{border:none;border-bottom:4px solid #e9e9e9;}
#menuluhur{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menuluhur ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menuluhur ul.menux{width:100%;position:static;border:none}
#menuluhur li{display:block;float:none;width:auto;text-align:left}
#menuluhur li a{color:#666}
#menuluhur li a:hover{background:#f1f1f1;color:#f9f9f9}
#menuluhur li:hover{background:#8493a0;color:#fff;}
#menuluhur a.dutt{font-weight: bold;}
#menuluhur li:hover > a.dutt,#menuluhur a.dutt:hover{background:#b1b1b1;color:#fff;}
#menuluhur input,#menuluhur label{display:inline-block;position:absolute;right:0;top:0;}
#menuluhur input:after,#menuluhur label:after {content:"\f0c9";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menuluhur input{z-index:4;}
#menuluhur input:checked + label{color:#fff;font-weight:700}
#menuluhur input:checked ~ ul{display:block}
#menuluhur ul li ul li a{width:100%;color:#666;}
#menuluhur ul li ul li a:hover{background:#8493a0;color:#fff;}
#menuluhur ul.menux a{background:#fff;color:#666;}
#menuluhur ul.menux a:hover{background:#8493a0;color:#fff;}
#menuluhur ul.menux li{background:#fff;color:#666;}
#menuluhur ul.menux li:hover{background:#8493a0;color:#fff;}
#menuluhur ul.menux li a{background:#fff;color:#666;}
#menuluhur ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menuluhur').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        if (scrollTop > stickyNavTop) {
            $('#menuluhur').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menuluhur').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

#TAHAP KEEMPAT

<nav id='menuluhur'>
    
    <input type='checkbox'/></input>
<label></label>
       <ul>
     <li><a href='#'>Ahmad</a></li>
     <li><a href='#'>Ganteng </a></li>
     <li><a href='#'>Sekali</a></li>
     <li><a href='#'>Sejak</a></li>
      <li><a href='#'>Lahir</a></li>
       </ul>
  
    
  </nav>

Silahkan Lihat contoh hasilnya dibawah

 DEMO