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>
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>
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>
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>
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;
}
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.
