Teknologi Riau – halo guys kali ini kita mengulik sedikit pemrograman html dengan topik cara merubah navbar ketika di scroll, setiap sobat semua pasti menginginkan website yang di buatnya terlihat indah nah karena disini kita akan memperindah website dengan custom navbar bootstrap.
Pertama sobat semua harus sudah memiliki website yang ingin di custom navbarnya, kemudian ya ikutin tutorial di bawah ya 🙂
Baca Juga : Belajar Pemrograman Php Dan Html Untuk Menyimpan Data Ke Database Mysql
Oke guys disini saya menggunakan bootstrap versi 5 dan kira kira seperti berikut file yang ingin di custom navbarnya
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″><!– Bootstrap CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1″ crossorigin=”anonymous”><title>Hello, world!</title>
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-light fixed-top” >
<div class=”container-fluid”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav me-auto mb-2 mb-lg-0″>
<li class=”nav-item”>
<a class=”nav-link active” aria-current=”page” href=”#”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-bs-toggle=”dropdown” aria-expanded=”false”>
Dropdown
</a>
<ul class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
<li><a class=”dropdown-item” href=”#”>Action</a></li>
<li><a class=”dropdown-item” href=”#”>Another action</a></li>
<li><hr class=”dropdown-divider”></li>
<li><a class=”dropdown-item” href=”#”>Something else here</a></li>
</ul>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#” tabindex=”-1″ aria-disabled=”true”>Disabled</a>
</li>
</ul>
<form class=”d-flex”>
<input class=”form-control me-2″ type=”search” placeholder=”Search” aria-label=”Search”>
<button class=”btn btn-outline-success” type=”submit”>Search</button>
</form>
</div>
</div>
</nav>
<div class=”wrapper” style=”padding-top: 50px;”>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
</div><!– Optional JavaScript; choose one of the two! –>
<!– Option 1: Bootstrap Bundle with Popper –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW” crossorigin=”anonymous”></script><!– Option 2: Separate Popper and Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js” integrity=”sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js” integrity=”sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj” crossorigin=”anonymous”></script></body>
</html>
Baca Juga : Cara Membuat Aplikasi Web Menjadi Android Apk
Kemudian guys tambahkan id pada bagian navbarnya sehingga menjadi seperti ini
<nav class=”navbar navbar-expand-lg navbar-light fixed-top” id=”nav”>
untuk id silahkan di sesuaikan, disini admin memberi nama id nya ” nav ”
jadi disini kita akan membuat navbar transparan sebelum di scroll dan ketika di scroll navbar memiliki warna background, oke langsung aja sobat tambah script di bawah ini tepat di atas </body> agar mudah di ingat
<script>
window.onscroll = function() {scrollFunction()};function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById(“nav”).style.background = “#f5402d”;
} else {
document.getElementById(“nav”).style.background = “rgba(255, 0, 0, 0)”;
}
}
</script>
jika sobat perhatikan disitu style akan berubah ketika scroll turun dan memberikan warna background ” #f5402d ” dan ketika tidak di scroll maka akan memberikan background yang transparan ” rgba(255, 0, 0, 0) “.
dan berikut file lengkap yang sudah di custom nav bootstrap nya
<!doctype html>
<html lang=”en”>
<head>
<!– Required meta tags –>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″><!– Bootstrap CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1″ crossorigin=”anonymous”><title>Hello, world!</title>
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-light fixed-top” id=”nav”>
<div class=”container-fluid”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav me-auto mb-2 mb-lg-0″>
<li class=”nav-item”>
<a class=”nav-link active” aria-current=”page” href=”#”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-bs-toggle=”dropdown” aria-expanded=”false”>
Dropdown
</a>
<ul class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
<li><a class=”dropdown-item” href=”#”>Action</a></li>
<li><a class=”dropdown-item” href=”#”>Another action</a></li>
<li><hr class=”dropdown-divider”></li>
<li><a class=”dropdown-item” href=”#”>Something else here</a></li>
</ul>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#” tabindex=”-1″ aria-disabled=”true”>Disabled</a>
</li>
</ul>
<form class=”d-flex”>
<input class=”form-control me-2″ type=”search” placeholder=”Search” aria-label=”Search”>
<button class=”btn btn-outline-success” type=”submit”>Search</button>
</form>
</div>
</div>
</nav>
<div class=”wrapper” style=”padding-top: 50px;”>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
<p>
Teknlogiriau.net adalah situs layanan Bisnis digital terpercaya yang ada di Riau, mari majukan bisnis anda bersama teknologi riau, mulai dari build website, all about design, photography, foto dan video editing.<br>Email : cs@teknologiriau.net
</p>
</div><!– Optional JavaScript; choose one of the two! –>
<!– Option 1: Bootstrap Bundle with Popper –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW” crossorigin=”anonymous”></script><!– Option 2: Separate Popper and Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js” integrity=”sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js” integrity=”sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj” crossorigin=”anonymous”></script>
<script>
window.onscroll = function() {scrollFunction()};function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById(“nav”).style.background = “#f5402d”;
} else {
document.getElementById(“nav”).style.background = “rgba(255, 0, 0, 0)”;
}
}
</script>
</body>
</html>
Berikut screenshot dari script di atas
Gambar : ketika belum di scroll
Gambar : ketika sudah di scroll
nah bagaimana guys mudah kan cara custom navbar bootstrap, selamat mencoba ya dan jangan lupa meninggalkan komentar di bawah, salam hangat untuk kita semua
