JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://court-legal-news.com/~mouerlaw/templates/i-kantine/js/jquery.sticky.js"></script>
<body>
    <div id="topbg">
        <div id="top">
<a id="logo" href="/"></a>

            <div id="contact"></div>
        </div>
    </div>
    <div id="headerbg1"></div>
    <div id="headerbg2"></div>
</body>

CSS

body {
    height: 1000px;
    overflow: scroll;
}
#top {
    width: 100%;
    height: 150px;
    background: red;
}
#logo {
    float: left;
    background: green;
    width: 50px;
    height: 50px
}
#contact {
    float: right;
    background: yellow;
    width: 50px;
    height: 50px;
}
#headerbg1 {
    width: 100%;
    height: 50px;
    background: lightblue;
}
#headerbg2 {
    width: 100%;
    height: 50px;
    background: blue;
}
@media all and (max-width: 450px) {
    #logo, #contact {
        float: none;
        display: block;
        margin: 0 auto;
    }

JavaScript

$(document).ready(function () {
      $("#headerbg1").sticky({
          topSpacing: 0
      });

      function checkForFloat() {
          

          if ($("#contact").css("float") === "none") {
              $("#headerbg2").sticky({
                  topSpacing: 50
              });
          } else {
              $("#headerbg2").sticky({
                  topSpacing: 120
              });
          }
      }
      setTimeout(checkForFloat, 1000);


      window.addEventListener('resize', function (event) {
            $("#headerbg2").unstick()

          if ($("#contact").css("float") === "none") {
              $("#headerbg2").sticky({
                  topSpacing: 50
              });
              $("#headerbg2").sticky('update')
          } else {
              $("#headerbg2").sticky({
                  topSpacing: 120
              });
              $("#headerbg2").sticky('update')
          }
      })

  });