JSFiddle - React, Tailwind, and code Playground

by total70

HTML

<div class="header">
	
</div>
<div class="search">
	
</div>
<div class="container">
	
</div>

CSS

body {
		padding: 0;
		margin: 0;
	}
	.header {
		width: 100%;
		height: 75px;
		background: blue;
		display: block;
	}
	.search {
		width: 150px;
		height: 25px;
		background: green;
		position: absolute;
		top: 150px;
	}
	.container {
		display: block;
		height: 3000px;
	}

JavaScript

$(function(){
	$(window).scroll(function(){
		if(window.scrollY >= 150 ) {
			$(".search").css({
				position: "fixed",
				top: 0
			});
		} else {
			$(".search").css({
				position: "absolute",
				top: 150
			});
		}

	});
});