Changing Header Background Colour on Scroll (jQuery)

Changing Header Background Colour on Scroll (jQuery)

Mungkin teman-teman pernah menjumpai sebuah web, ketika halaman web tersebut kita gulir (scroll) ke bawah, background pada bagian header atau navigasi akan berubah warnanya. Kita dapat mencoba membuat efek seperti itu dengan menggunakan jQuery, agar web yang kita buat lebih menarik tentunya :).

Langkahnya sebagai berikut, namun sebelumnya disini kita akan bagi dulu perbagian untuk skripnya pada bagian tag head dan body dengan tujuan supaya memudahkan kita saat membaca skrip, kemudian skrip keseluruhan dan demonya ada pada bagian paling bawah artikel ini.

Buat file dengan nama index.html, kemudian isikan dengan menuliskan skrip kode berikut:

pada bagian tag head

<head>
	<title>Changing Header Background Colour on Scroll (jQuery) | Kursus Web YELLOWWEB.ID</title>
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

		* {
			margin:0;
			padding:0
		}

		html {
			font-family: 'Abril Fatface', cursive;
		    background: lightgray;
		    height: 5000px;
		}

		.header {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    padding: 0;
		    z-index: 10000;
		    transition: all 0.2s ease-in-out;
		    height: auto;
		    background-color:purple;  
		    
		    text-align: center;
		    line-height: 40px;
		    font-size: 50px;
		    padding: 50px 0;
		}

		.header.active {
		    background: #033958;
		    /*-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*/
		    /*-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*/
		    /*box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*/
		}
		
		.visit{
			margin-top: 100px;
		}

	</style>
	<!-- <script type="text/javascript" src="jquery-3.3.1.js"></script> -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

	<script type="text/javascript">
		$(window).on("scroll", function(){
			if($(window).scrollTop() > 50){
				$(".header").addClass("active");
			} else {
				$(".header").removeClass("active");
			}
		});
	</script>
</head>

disana memang terlihat panjang sekali, karena JavaScript dengan CSS kita jadikan satu.

untuk bagian tag body

<div class="header">Belajar Sticky</div>
	<div class="visit">
		<p><i class="fa fa-hand-o-right fa-fw"></i><a target="_blank" href="http://www.yellowweb.id/blog">Untuk tutorial lainnya silahkan kunjungi blog kami di www.yellowweb.id/blog</a></p>
	</div>

Yang perlu kita perhatikan adalah bagian JavaScript / jQuerynya, perlu kita garis bawahi disini kita menggunakan jQuery CDN milik google dengan versi jQuery 2.x.x

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Aktivasinya

<script type="text/javascript">
		$(window).on("scroll", function(){
			if($(window).scrollTop() > 50){
				$(".header").addClass("active");
			} else {
				$(".header").removeClass("active");
			}
		});
	</script>

Untuk kodingan lengkapnya bila kita jadikan satu, maka akan seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Changing Header Background Colour on Scroll (jQuery) | Kursus Web YELLOWWEB.ID</title>
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

		* {
			margin:0;
			padding:0
		}

		html {
			font-family: 'Abril Fatface', cursive;
		    background: lightgray;
		    height: 5000px;
		}

		.header {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    padding: 0;
		    z-index: 10000;
		    transition: all 0.2s ease-in-out;
		    height: auto;
		    background-color:purple;  
		    
		    text-align: center;
		    line-height: 40px;
		    font-size: 50px;
		    padding: 50px 0;
		}

		.header.active {
		    background: #033958;
		    /*-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*/
		    /*-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*/
		    /*box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);*/
		}
		
		.visit{
			margin-top: 100px;
		}

	</style>
	<!-- <script type="text/javascript" src="jquery-3.3.1.js"></script> -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

	<script type="text/javascript">
		$(window).on("scroll", function(){
			if($(window).scrollTop() > 50){
				$(".header").addClass("active");
			} else {
				$(".header").removeClass("active");
			}
		});
	</script>
</head>
<body>
	<div class="header">Belajar Sticky</div>
	<div class="visit">
		<p><i class="fa fa-hand-o-right fa-fw"></i><a target="_blank" href="http://www.yellowweb.id/blog">Untuk tutorial lainnya silahkan kunjungi blog kami di www.yellowweb.id/blog</a></p>
	</div>

</body>
</html>

Comments are closed.