X

Sunday, September 13, 2020

Home » , , » Cara Membuat Menu Auto Fixed Ketika di Scroll | WEB

Cara Membuat Menu Auto Fixed Ketika di Scroll | WEB


 

Auto Fixed disini biasanya banyak di terapkan pada web-website yang ingin memiliki tampilan atau design web yang lebih menarik. Jadi simpelnya ketika kita melakukan scroll ke bawah menu yang tadinya posisinya tetap akan berubah menjadi fixed di atas atau di bagian tertentu yang sudah di tentukan.

Untuk membuat tampilan website anda seperti ini sangatlah mudah anda bisa memanfaatkan fitur javascript. Sebagai contoh disini kita akan membuatnya dengan tampilan html sederhana seperti berikut :
 


 

Ketika anda melakukan aksi scroll maka tampilan akan menjadi seperti berikut :




Kode cara Membuat Menu Auto Fixed Ketika di Scroll


<!DOCTYPE html>
<html>
<head>
	<title>Coding Rakitan</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<style type="text/css">
		body{
			height: 2000px;margin: 0px;padding: 0px;
		}.bl{
			height: 200px;
		}
		.menu{
			height: 50px;
			background: #001b6a;
			width: 100%;
		}.fx{
			top: 0px;
			position: fixed;
		}.d-flex{
			display: flex;
			height: 100%;
		}.menu a{
			margin-right: 20px;
			margin-bottom: auto;
			margin-top: auto;
			color: white;
			font-family: sans-serif;
		}.m-auto{
			margin: auto;
		}h1{
			font-size: 83px;
			font-family: sans-serif;
		}
	</style>
</head>
<body >
<div class="bl">
	<div class="d-flex">
		<h1 class="m-auto">Coding Rakitan</h1>
	</div>
</div>
<div class="menu" id="menu">
	<div class="d-flex">
		<a>Menu 1</a>
		<a>Menu 2</a>
		<a>Menu 3</a>
		<a>Menu 4</a>
	</div>
</div>
<br>
<div class="d-flex">
	
	<img class="m-auto" style="margin-top: 0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKb401NNIMCTN4hLJY6sYbJ9doTZPWRvMrwj-KEsU6xJ1FurpHhGqjfj48_K3-VQehloD6MGwOd-7z-e4DuJlz-ijqigIQpIBqQdFzEVZJn0dKk81dyLR7tYSL2xvsi9US_iRtB-w7Ir1/s2518/Screenshot_2020-09-13+CODING+RAKITAN+INSPIRASI+CODING+TERUPDATE+android+studio+laravel+php.png" style="width: 700px;">
</div>
</body>
<script type="text/javascript">
	$(function(){

	  var menu = $('#menu');
	  pos = menu.offset();

	  $(window).scroll(function(){
	   if($(this).scrollTop() > pos.top+menu.height()){
		    menu.addClass('fx');
	   } else if($(this).scrollTop() <= pos.top ){
	    	menu.removeClass('fx');
	   }
	  });

});
</script>
</html>
Kode yang perlu anda perhatikan ada pada : 

<script type="text/javascript">
	$(function(){

	  var menu = $('#menu');
	  pos = menu.offset();

	  $(window).scroll(function(){
	   if($(this).scrollTop() > pos.top+menu.height()){
		    menu.addClass('fx');
	   } else if($(this).scrollTop() <= pos.top ){
	    	menu.removeClass('fx');
	   }
	  });

});
</script>
Dimana pada kode javascript di atas menginstruksikan ketika terjadi scroll kebawah dan nilai over dari scroll ini lebih besar dari over menu maka tambahkan class fx pada menu, yang mana menu fx ini akan membuat position menjadi fixed dan berada di atas atau top 0px. Sedangkan bila kebalikannya bila terjadi scroll ke atas dan nilainya lebih kecil atau sama dengan menu over maka hapus kembali class fx yang membuat menu kembali seperti semula.

Bagikan artikel ke:

Facebook Google+ Twitter

0 comments:

Post a Comment