Cara membuat Smooth Scrolling ditambah dengan Sticky navigation dengan Jquery

hai, malam semua sahabat gazkintz ,,

setelah vakum beberapa saat yang lalu.

ayo kita mulai saja , pasti kalian udah tau tentang Parallax Scrolling tapi bingung mau buatnya gimana , tenang saya akan kasih tau cara membuat Parallax Scrolling ditambah dengan Stciky Navigation yang mudah dan cepat ,,,

ok kalo gitu kita langsung mulai ajja,,,

Pertama kita buat dulu stuktur HTML nya ,kira-kira seperti ini :

<div class="nav-utama">

        <nav class="nav">

               <ul id="nav-atas">

                      <li class="active"><a href="#nav-atas">Home</a></li>

                       <li ><a href="#sesi1">Sesi 1</a></li>

                       <li ><a href="#sesi2">Sesi 2</a></li>

                       <li ><a href="#sesi3">Sesi 3</a></li>

                       <li ><a href="#sesi4">Sesi 4</a></li>

                </ul> 

        </nav>

</div>

<div id="#sesi1">Disini Sesi Satu </div>

<div id="#sesi2">Disini Sesi Dua</div>

<div id="#sesi3">Disini Sesi Tiga </div>

<div id="#sesi4">Disini Sesi Empat </div>

- setiap link yang dibuat akan mengarah kepada div dengan nama yang sama ,,,

- <li class="active"></li> Ini untuk mengindex bahwa menu yang sedang aktif  ,,

-  nanti kita kan menhandle nya dengan Jquery ,,,

dan ini Jquery nya

$(document).ready(function(){

     //variabel untuk sticky navigation
     var  mn = $(".nav");
            mns = "nav-scrolled";
            hdr = $('.nav-utama').height();


     var lastId, //varible untuk id setiap menu
           topMenu = $("#nav-atas"),
           topMenuHeight = topMenu.outerHeight()+15,
 
      //semua list item
       menuItems = topMenu.find("a"),
 
       scrollItems = menuItems.map(function(){
                  var item = $($(this).attr("href"));
                   if (item.length) { return item; }
            });


         menuItems.click(function(e){
                   var href = $(this).attr("href"),
                   offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
 
        //membuat animasi
                     $('html, body').stop().animate({
                          scrollTop : offsetTop
                                 }, 300);
                           e.preventDefault();
                       });

      $(window).scroll(function(){
 
              //sticky navigasi
               if( $(this).scrollTop() > hdr ) {
                       mn.addClass(mns);
                              } else {
                       mn.removeClass(mns);
                      }
 
     // mendapatkan posisi container
      var fromTop = $(this).scrollTop()+topMenuHeight;
 

       // mendapatkan nilai id ketika discroll
       var cur = scrollItems.map(function(){
       if ($(this).offset().top < fromTop)
               return this;
            });
 
       // mendapatkan nilai id dari setiap element
       cur = cur[cur.length-1];
       var id = cur && cur.length ? cur[0].id : "";
 
        if (lastId !== id) {
                 lastId = id;
     
                 // Set/remove active class
                 menuItems
         .                           .parent().removeClass("active")
         .                            end().filter("[href=#"+id+"]").parent().addClass("active");
                         }                
              });
});

dan ini CSS nya.

//ini untuk mereset semua padding dan margin
*{
    margin:0;
    padding:0;
}

ul,li {
    list-style:none;
}

a{
    text-decoration:none;
}
.nav-utama{
    width:100%;
    height:1000px;
    background:#ff0060;
}

.nav{
    width:100%;
    height:auto;
    background:#f1f1f1;
}

.nav ul li {
    display:inline-table;
    padding:42px 7px;
}

.nav ul li:hover{
    background:#c5c5c5;
}

#sesi1{
    width:100%;
    height:1000px;
    background:#bfbfbf;
}

#sesi2{
    width:100%;
    height:1000px;
    background:#3afae1;
}

#sesi3{
    width:100%;
    height:1000px;
    background:#3a5795;
}

#sesi4{
    width:100%;
    height:1000px;
    background:#fcff04;
}

.active {
   border-top:2px solid #111;
}

.nav-scrolled{
    position:fixed;
    width:100%;
    height:130px;
    background:#f7f7f7;
    top:0;
}

Tada sudah selesai ,,

Bila agan - agan ingin melihat Demo silahkan klik disini or download

Bagaimana ? mudah bukan ? selamat mencoba agan - agan sekalian ,,,

~ Selamat Malam ~