JSFiddle - React, Tailwind, and code Playground

by Slava P

HTML

<body style="margin: 0; padding: 0;">
    <div style="height: 50px; background: green; width: 100%;">header</div>
    <div class="hiddenHeader" style="display: none; height: 50px;  position: fixed; background: black; top: 0; color: white; width:100%; overflow: hidden;">i will behave as sticky fixed position div at top header when you reach the form below</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta risus quam, vel pretium lectus auctor ullamcorper. Suspendisse auctor leo nec orci semper commodo. Vestibulum semper erat et efficitur bibendum. In nulla diam, luctus quis magna et, gravida iaculis ligula. Integer nec commodo arcu. Fusce maximus libero vitae diam egestas, id tempus sem suscipit. Suspendisse dictum lectus metus, ac feugiat velit porttitor quis. Nulla non ultrices nulla. Pellentesque porta nibh sed facilisis laoreet.</p>
    <p>Aliquam sit amet euismod orci, sit amet porttitor ligula. Nunc pulvinar laoreet imperdiet. Mauris condimentum sagittis diam eget bibendum. Sed vestibulum ipsum sit amet enim faucibus, eget aliquet eros sollicitudin. Praesent at tellus et leo viverra volutpat. Praesent suscipit risus sed nisl maximus maximus. Fusce lacinia feugiat ipsum sed ornare. Nullam vestibulum mauris quis est molestie, vitae porta ligula placerat. Donec auctor sed ante ac ornare. Duis non lacus accumsan, pharetra dui non, bibendum quam. Nunc volutpat sollicitudin odio id tristique. Cras nec aliquet ipsum. Etiam gravida mauris vel laoreet hendrerit. Fusce at sapien tempus, faucibus purus non, placerat justo. Maecenas vitae cursus lectus.</p>
    <p>Suspendisse euismod, ipsum sed hendrerit convallis, ligula elit semper velit, sed malesuada mauris dui eu ipsum. Ut volutpat massa ut elit viverra lacinia. Sed consectetur enim laoreet blandit convallis. Donec feugiat vitae ex at hendrerit. Vestibulum auctor nulla blandit turpis congue vulputate. Ut condimentum egestas purus a ultrices. Sed tortor tortor, convallis in risus ut,...

JavaScript

$(document).ready(function () {
    $(window).scroll(function () {
        if (($(window).scrollTop() + $(window).height()) > $('form').offset().top) {
            $('.hiddenHeader').show();
        } else {
            $('.hiddenHeader').hide();
        }
    });
});