Membuat Menu Fixed Saat di Scroll

Menu adalah salah satu elemen dalam website dimana peran menu ini sebagai pembimbing user saat berkunjung website kita. Sehingga user tersebut tahu harus kemana untuk mencari informasi yang ingin ia dapatkan. Makanya membuat menu untuk website harus diperhatikan dari segi tampilan dan fungsinya agar tidak membuat bingung user. Salah satu teknik yang sering digunakan adalah membuat menu fixed saat di scroll. Karena saat ini banyak sekali website diakses menggunakan smartphone, yang otomatis untuk melihat konten dengan cara di scroll.

Untuk membuat menu fixed saat discroll terbilang cukup mudah, hal yang perlu kalian keuasai sebelum membuat menu ini adalah dasar tentang HTML, CSS dan Jquery/Javascript. Karena dengan ketiga hal tersebutlah kita akan membuat fungsi menu fixed saat di scroll. Untuk lebih jelasnya kalian bisa ikuti contoh code berikut ini.

Menu.html

<html>
<head>
	<meta charset="UTF-8">
	<title> Menu Navigasi dengan Jquery </title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<style>
		.menu{
			position: absolute;
			top: 0;
			left: 0;
			height: 60px;
			line-height: 50px;
			width: 100%;
			background-color: red;
		}
		.container{
			width: 950px;
			margin: auto;
		}
		#konten{
			margin-top: 80px;
		}
		.fixed{
			position: fixed;
			top:0;
		}
	</style>
	<script>
		$(window).bind('scroll', function () {
		    if ($(window).scrollTop() > 90) {
		        $('.menu').addClass('fixed');
		    } else {
		        $('.menu').removeClass('fixed');
		    }
		});
	</script>
</head>
<body>
	<div class="menu">
		<div class="container">
			<a href="">Menu</a> | <a href="">Profile</a> | <a href="">Kontak</a>
		</div>
	</div>
	<div class="container" id="konten">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>		
	</div>
</body>
</html>

Setelah sudah simpan kedua file tersebut dengan nama dan format sesuai dengan judulnya masing-masing. Untuk melihat hasilnya kalian cukup membuka file html pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-menu-fixed-saat-di-scroll-rangga1-021017

Gambar diatas adalah tampilan awal, saat kalian scroll maka menu navigasinya akan tetap berada diatas seperti ini.

membuat-menu-fixed-saat-di-scroll-rangga2-021017

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat menu fixed saat di scroll. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *