JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<header>
    <div></div>
    <nav>A Menu</nav>
</header>
<article>
	<h1>Lorem ipsum dolor sit amet.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, delectus, culpa aliquid corporis sunt neque modi a facilis deleniti expedita ab fugiat beatae corrupti temporibus pariatur voluptates at quas. Illum.</p>
	<p>Quis, exercitationem laudantium veritatis tempora rem molestiae obcaecati id ad fugit sint nemo beatae alias porro impedit voluptatem est possimus accusantium sequi consectetur saepe et a omnis. Voluptatum, libero, non.</p>
	<p>Aliquam, possimus, vero, eum recusandae perferendis cum ex suscipit beatae non nisi amet explicabo dolore excepturi consequuntur voluptatum consequatur unde error! Qui alias dolorum animi. Quasi, soluta quia repellat numquam.</p>
	<p>Earum, quaerat, veritatis, voluptates voluptatum excepturi at eligendi voluptate doloribus voluptas libero minima repudiandae quae eveniet explicabo animi velit asperiores culpa! Distinctio cum expedita incidunt totam quia laborum adipisci eaque?</p>
	<p>Ex, iste, illo, delectus accusantium hic amet saepe nemo quod tenetur iusto at perspiciatis error inventore molestiae alias earum voluptate sed corporis obcaecati molestias perferendis quia quidem assumenda veniam temporibus.</p>
	<p>Ex, iste, illo, delectus accusantium hic amet saepe nemo quod tenetur iusto at perspiciatis error inventore molestiae alias earum voluptate sed corporis obcaecati molestias perferendis quia quidem assumenda veniam temporibus.</p>
	<p>Ex, iste, illo, delectus accusantium hic amet saepe nemo quod tenetur iusto at perspiciatis error inventore molestiae alias earum voluptate sed corporis obcaecati molestias perferendis quia quidem assumenda veniam temporibus.</p>
	<p>Ex, iste, illo, delectus accusantium hic amet saepe nemo quod tenetur iusto at perspiciatis error inventore molestiae alias earum voluptate sed corporis obcaecati molestias perferendis quia quidem assumenda veniam temporibus.</p>
</article>

SCSS

header div{height:40px; background:blue;}
header nav{background:red;}



.fixed
{
	header nav
	{
		position:fixed;
		top:0px;
		opacity:0.6;
        width:100%;
		&:hover{opacity:1;}
	}
}

JavaScript

$(document).ready(function()
		{
            $('header').hover(function(){
               $(this).animate({
                opacity: 1 }, 1000);
            }, function(){
                $(this).animate({
                opacity: 0.6 }, 1000);
            });
            
			//Calculate the height of <header>
			//Use outerHeight() instead of height() if have padding
			var aboveHeight = $('header>div').outerHeight();
			//when scroll
			$(window).scroll(function()
			{
				//if scrolled down more than the header’s height
				if ($(window).scrollTop() > aboveHeight)
				{
					// if yes, add “fixed” class to the <nav>
					// add padding top to the #content 
					$('body').addClass('fixed');
					var navHeight = $('header>nav').outerHeight();
					$('article').css('padding-top',navHeight);
				} else {
				// when scroll up or less than aboveHeight,	remove the “fixed” class, and the padding-top
				$('body').removeClass('fixed');
				$('article').css('padding-top',"");
				}
			});
		});