Cacher is the code snippet organizer for pro developers

<!-- Fixed Header -->

<!-- link video -->
<a href="https://www.youtube.com/watch?v=6QaXpMaBFv8&list=PLoq3Accf02PVO4GvY4-UtIQkeD6tNmX_f&index=7">link video</a>


<script>

	$(document).ready(function() {
	
	let header = $('#header');
	let intro = $('#intro');
	// let introHeight = intro.height(); without padding
	// let scrollPos = $(window).scrollTop();
	let scrollPos;
	let introHeight;
	
	$(window).on("scroll load resize", function() {
		let introHeight = intro.innerHeight();
		scrollPos = $(window).scrollTop();
		if (scrollPos > introHeight) {
			header.addClass('fixed');
		}
		else {
			header.removeClass('fixed');
		}
	});
});

</script>

<style>
	.header {
		position: absolute;
	}
	
	.header.fixed {
		position: fixed;
	}
</style>