JSFiddle - React, Tailwind, and code Playground

by lakshmipriya

HTML

<div>

       <div>
          <h1>Nav goes here</h1>

       </div>
       <div>
           <div id="pinHeader" class="pinned">
                <h1> Main Header </h1>
                <h2>Sub header goes here</h2>
                <hr />
           </div>
       </div> 
       <!-- main content goes here -->
       <div id="mainContent">
           <h2>Content 1</h2>
           <p class="para">blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        </p> 
        <h2>Content 2</h2>
        <p class="para">blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        ah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah <br />
        blah blah blah blah...

CSS

.para {

           background-color:yellow;

        }

        .pinned {
            background-color:#0000FF;
        }

        #pinHeader {
          position: fixed;
          top: 0;
          width:100%;

        }
#mainContent
{
    margin-top:8%;
}

JavaScript

var divTop = null;
    jQuery(document).ready(function(){

        jQuery(window).scroll(function() {
            pinnedPanel();

        });

        jQuery(window).resize(function() {

            pinnedPanel();

        });

        divTop = jQuery('#pinHeader').offset().top;
    });

    var pinned = false;

    function pinnedPanel() {

    var stickHeader = jQuery('#pinHeader');

    var contentDiv = jQuery('#mainContent');

      // what the y position of the scroll is
      var y = jQuery(window).scrollTop();
if (y >= divTop) {
            stickHeader.addClass('fixed');
            pinned = true;

      } else if (pinned) {
            stickHeader.removeClass('fixed');
            pinned = false;

      }
    }