Membuat Navbar Collapse ketika di scroll ke bawah ilang, ketika di scroll ke atas muncul
Sep 10, 2017
Add Comment
Iya Selamat malam kali ini admin akan berbagi tips membuat navbar collapse ketika kita scroll ke bawah navbarnya ilang, ketika di scroll ke atas navbarnya muncul kaya navbar twitter. langsung aja, pertama buat dulu kerangka htmlnya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar Scroll Effect</title>
<link rel="stylesheet" href="css/nav.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Service</a></li>
</ul>
</nav>
<div class="content">
</div>
<script src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
<script type="text/javascript">
(function() {
var documentElem = $(document),
nav = $('nav'),
lastScrollTop = 0;
documentElem.on('scroll', function() {
var currentScrollTop = $(this).scrollTop();
// scroll down
if(currentScrollTop > lastScrollTop) nav.addClass('hidden');
// scrollTop
else nav.removeClass('hidden');
lastScrollTop = currentScrollTop;
});
})();
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar Scroll Effect</title>
<link rel="stylesheet" href="css/nav.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Service</a></li>
</ul>
</nav>
<div class="content">
</div>
<script src="js/jquery-2.2.0.min.js" charset="utf-8"></script>
<script type="text/javascript">
(function() {
var documentElem = $(document),
nav = $('nav'),
lastScrollTop = 0;
documentElem.on('scroll', function() {
var currentScrollTop = $(this).scrollTop();
// scroll down
if(currentScrollTop > lastScrollTop) nav.addClass('hidden');
// scrollTop
else nav.removeClass('hidden');
lastScrollTop = currentScrollTop;
});
})();
</script>
</body>
</html>
kemudian kita buat style nya di css
* {
margin: 0;
padding: 0;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #555;
text-align: center;
padding: 20px 0;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
.hidden {
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
-ms-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
}
nav ul li {
display: inline-block;
margin-right: 60px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
text-decoration: none;
text-transform: uppercase;
color: #fff;
font-family: Arial, sans-serif;
}
.content {
height: 2000px;
background-color: rgb(200,200,200);
}
Silakan lihat hasilnya di browser, jika ada yang error bisa ditanyakan pada kolom komentar di bawah. Ok sekianlah tutorial kali ini semoga bermanfaat, jika berkenan mohon di share ke teman anda
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Membuat Navbar Collapse ketika di scroll ke bawah ilang, ketika di scroll ke atas muncul"
Post a Comment