Pertama, kita buat halamannya.
<!doctype html>
<html>
<head>
<title>nav-fixed-scrool</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<header id="menu1">
<h1>Ini Header</h1>
</header>
<nav>
<ul>
<a href="#menu1"><li>Home</li></a>
<a href="#menu2"><li>Portofolio</li></a>
<a href="#menu3"><li>Tentang Kami</li></a>
<a href="#menu4"><li>Hubungi Kami</li></a>
</ul>
</nav>
<section>
<article id="menu2">
<h1>Portofolio</h1>
</article>
<article id="menu3">
<h1>Tentang Kami</h1>
</article>
<article id="menu4">
<h1>Hubungi Kami</h1>
</article>
</section>
</body>
</html>
Lalu buat file css di folder yang sama dengan html tadi. Nama file css-nya
body *{margin:0px;}
header{
width: 100%;
height: 250px;
background-color: orange;
}
nav{
position: absolute;
width: 100%;
height: 50px;
background-color: #333;
}
nav a{
display: inline-block;
padding-right: 20px;
text-decoration: none;
font-size: 14pt;
cursor: pointer;
color: #fff;
}
nav a:hover{
color: orange;
}
article{
padding-top: 50px;
width: 100%;
height: 500px;
background-color: orange;
border-top: 5px solid #333;
}
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
if (y>=250){
$("nav").css({
"position":"fixed",
"top":"0px"
});
}else{
$("nav").css({
"position":"absolute",
"top":"250px"
});
};
});
});
</script>Untuk yang butuh source code-nya, bisa di download
Tidak ada komentar:
Posting Komentar