JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<div class="content"></div>
<div class="fixme"><input type='text'/></div>
<div class='content-below'>
akshdf lkajdjfhalkhf aliu av alf alkhfkashd vigawhbfsdlmhkb ly g lkja,weifugl ivtui6a keglkgh lkfugvka oi hd jaygvioasflagfuy o yagvhy f aku ayg gavkuygdf j viuayg fhaf
</div>
<div class='content-below'>
akshdf lkajdjfhalkhf aliu av alf alkhfkashd vigawhbfsdlmhkb ly g lkja,weifugl ivtui6a keglkgh lkfugvka oi hd jaygvioasflagfuy o yagvhy f aku ayg gavkuygdf j viuayg fhaf
</div>
<div class='content-below'>
akshdf lkajdjfhalkhf aliu av alf alkhfkashd vigawhbfsdlmhkb ly g lkja,weifugl ivtui6a keglkgh lkfugvka oi hd jaygvioasflagfuy o yagvhy f aku ayg gavkuygdf j viuayg fhaf
</div>

CSS

body { height: 3000px; }
.content { height: 200px; }
.fixme { background: black; text-align: center; width: 100%; padding: 20px; box-sizing: border-box; }

JavaScript

var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.fixme').css({
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {
        $('.fixme').css({
            position: 'static'
        });
    }
});