.png)
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
0 komentar :