Membuat Navbar Collapse ketika di scroll ke bawah ilang, ketika di scroll ke atas muncul
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
Belum ada Komentar untuk "Membuat Navbar Collapse ketika di scroll ke bawah ilang, ketika di scroll ke atas muncul"
Posting Komentar