JSFiddle - React, Tailwind, and code Playground

by Miftah Faroq

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html>
<head>
	<title>Sticky</title>
</head>
<body>
	<div class="header">Scroll Me :)</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>

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;
		}

JavaScript

$(window).on("scroll", function(){
			if($(window).scrollTop() > 50){
				$(".header").addClass("active");
			} else {
				$(".header").removeClass("active");
			}
		});