Membuat menu fixed saat scroll

Sering kita jumpai beberapa menu di suatu web posisinya selalu tetap saat scroll. Nah kali ini Web Design Tutorial akan membarikan tutorial tersebut. Akan tetapi kali ini akan kita buat posisinya tetap hanya jika kita scroll ke bawah.

Kali ini kita membutuhkan javascript untuk membuat menu ini dan kita menggunakan jQuery untuk membuatnya. Yaitu menggunakan teknik addClass dan removeClass pada jQuery. Dan untuk sekalian pembelajaran, kita akan menggunakan beberapa tag HTML5 pada tutorial kali ini.

Langkah 1:Membuat Struktur HTML

<div class="container">
<header></header>
<nav></nav>
<section></section>
</div>

Diatas merupakan struktur awal dari html yang akan kita buat. Untuk lebih lanjut akan dibahas selanjutnya.

Header


<header>
 <h1>Posisi Menu Tetap Saat Scroll</h1>
 <p><a href="http://web-tutorial19.blogspot.com//2015/02/membuat-menu-fixed-saat-scroll.html">Dari Web Design Tutorial</a></p>
</header>

Tag Header biasanya berisi Judul Website dan Deskripsinya

Navigation


<nav>
 <div id="menu" class="normal">
  <ul>
   <li><a href="#">Beranda</a></li>
   <li><a href="#Pelayanan">Pelayanan</a></li>
   <li><a href="#Tentang">Tentang</a></li>
   <li><a href="#Blog">Blog</a></li>
   <li><a href="#Kontak">Kontak</a></li>
  </ul>
 </div>
</nav>

Tag Nav berisi Menu kita.

Section

 <section>
  <h2>Scroll ke Bawah</h2>

  <aside id="tentang">
   <h2>Tentang Kami</h2>
   <p>Ini Berisi Tentang Web kami</p>
  </aside>

  <aside id="pelayanan">
   <h2>Pelayanan</h2>
   <p>Ini berisi Pelayanan Web Kami</p>
  </aside>
  <aside id="Blog">
   <h2>Blog</h2>
   <p>Blog kami belum tersedia</p>
  </aside>
  <aside id="Kontak">
   <h2>Kontak</h2>
   <p>silahkan hubungi 08xxxxxxxxx</p>
  </aside>

 </section>

Tag Section ini Berisi tentang konten web kita.

Langkah 2:Membuat CSS

CSS AWAL


*{
 padding: 0;
 margin: 0;
}
html{
 background: url(img/bg.png);
}
body{
 margin-top: 70px;
}
a{
 text-decoration: none;
 color: #333;
}

header, nav, section{
 width: 450px;
 margin: 0 auto 0px auto;
}

Diatas adalah CSS yang digunakan untuk keseluruhan. Kita buat simpel saja dulu agar tidak bingung.

CSS HEADER


header{
 padding: 10px 0;
}

CSS Menu Normal


#menu{
 margin-bottom:20px;
}
.normal{
 padding: 10px;background: #B16B67;
}
#menu ul{
 list-style-type: none;
 padding: 0;
}
#menu ul li{
 display: inline-block;
}
#menu ul li a{
 display: inline-block;
 padding:10px;
 border-radius: 10px;
 color: #ddd;
}
#menu ul li a:hover{
 background:black;
 color: #fff;
}

CSS MENU SAAT SCROLL


.tetap{
 position: fixed;
 top: -5px;
 left: 0;
 width: 100%;
 padding: 10px;
 background: #0B7271;
 color: #f8f8f8;
 -webkit-transition: top 400ms ease 0s;
 -moz-transition: top 400ms ease 0s;
 -o-transition: top 400ms ease 0s;
 -ms-transition: top 400ms ease 0s;
 transition: top 400ms ease 0s;
 box-shadow: 0 0 40px #222;
 -webkit-box-shadow: 0 0 40px #222;
 -moz-box-shadow: 0 0 40px #222;
}
.tetap ul{
 width: 450px;
 margin: 0 auto;
}

CSS UNTUK KONTEN


aside{
padding: 50px 10px;
}
aside h2{
margin: 20px 0;
}

Nah Kita selesai untuk CSS-nya

Langkah 3:Memberikan Javascript

$(function(){

 var menu = $('#menu'),
  pos = menu.offset();

  $(window).scroll(function(){
   if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('normal')){
    menu.fadeOut('fast', function(){
     $(this).removeClass('normal').addClass('tetap').fadeIn('fast');
    });
   } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
    menu.fadeOut('fast', function(){
     $(this).removeClass('tetap').addClass('normal').fadeIn('fast');
    });
   }
  });

});

Bisa dilihat bahwa diatas pada saat kita scroll kebawah maka class normal akan dihapus dan class tetap akan ditambahkan pada Menu. Berlaku juga sebaliknya.