Cara Membuat Navbar Fixed Top Ketika di Scroll dengan Css, Javascript

by
Artikel ini saya ingin berbagi tips sederhana cara membuat fixed top ketika di scroll untuk menambah kenyamanan pengguna. Pada umumnya website terdiri dari bagian header, sidebar, dan footer dengan bentuk yang monoton. Tapi sekarna sudah banyak website-website dengan tampilan yang lebih menarik dengan gaya design yang bervariasi.

Menarik saja tidak cukup, membuat website User Friendly itu penting agar website menjadi lebih bagus dengan cara membuat  navbarfixed ketika di scroll akan memudahkan pengunjung untuk mengeksplore isi konten website.
Banyak cara untuk membuat sticky bar fixed saat halaman scroll, salah satunya dengan menggunakan properti CSS sederhana sebagai berikut.
.sticky{
  position:sticky;
  top:0;
}
Atau dengan javascript. Membuat navbar top after scrolling dengan javascript ini sedikit lebih panjang dibandingkan dengna css diatas,  cara ini.

Cara Membuat Navbar Fixed  Top Ketika di Scroll dengan javascript

Navbar fixed top after scrolling dengan javascript bisa lebih leluasa mengatur fungsi-fungsi lainnya oleh karena ini apabila anda mempelajari javascript maka akan lebih mudah memahaminya.
Step 1 – Buat satu file dengan ekstensi .html > lalu  copy source code  html,css dan javascript yang telah saya gabung dibawah ini:

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Hardifal.com</title>

<!-- css start -->
<style type="text/css">
#navbar{
background: green;
padding: 10px;
}
#navbar a{
color:white;
padding: inherit;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
</style>
<!-- css end -->

</head>
<body>

<!-- content -->
<h1>Contoh membuat navbar fixed top ketika di scroll</h1>

<nav id="navbar">
<a href="#" class="active">home</a>
<a href="#">menu 1</a>
<a href="#">menu 2</a>
</nav>

<br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br>
<!-- content -->

<!-- javascript -->
<script>
window.onscroll = function() {myFunction()};

var widget = document.getElementById('navbar');
var sticky = widget.offsetTop;

function myFunction(){
if (window.pageYOffset >= sticky){
widget.classList.add("sticky")
} else{
widget.classList.remove("sticky");
}
}
</script>
<!-- javascript end -->

</body>
</html>

Hasilnya :

cara membuat navbar fixed top ketika di scroll

Demo diatas menjadi contoh dari inti sekaigus penutup pada artikel kali ini untuk cara membuat navbar fixed top ketika di scroll dengan css dan javascript. Jadi silahkan anda pelajari dari setiap souce-code nya diatas, semoga bisa membantu.

Apabila anda punya request seputar design web developer dengan html, css dan javascript maka silahkan ajuka di kolom komentar.

Leave a Comment