JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<header>
    <div class="logo"></div>
</header>
<p>This is a test. I am putting a lot of copy in here so that we have a scrollbar.</p>
<p>This is a test. I am putting a lot of copy in here so that we have a scrollbar.</p>
<p>This is a test. I am putting a lot of copy in here so that we have a scrollbar.</p>
<p>This is a test. I am putting a lot of copy in here so that we have a scrollbar.</p>
<p>This is a test. I am putting a lot of copy in here so that we have a scrollbar.</p>
<p>This is a test. I am putting a lot of copy in here so that we have a scrollbar.</p>

CSS

p {
    padding: 0 0 200px 0;
}

header {
    left: 0;
    position: absolute;
    top: 0;
}

header.small {
    position: fixed;
}

.logo {
    background: #f00;
    height: 256px;
    width: 256px;
}

.small .logo {
    background: #0f0;
    height: 88px;
    width: 88px;
}

JavaScript

var headerHeight = $('header .logo').height();

$(window).on('scroll', function() {
    var winPos = $(window).scrollTop();
    if(winPos >= headerHeight) {
        $('header').addClass('small');
    } else {
        $('header').removeClass('small');
    }
});