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});
  });

$(document).ready(function(){   
 function checkForFloat()
  {
    setTimeout(checkForFloat, 100);
    if($("#contact").css("float") === "none") {
      $("#headerbg2").sticky({topSpacing:180});   
    }
    else if (!$("#contact").css("float") === "none") {
      $("#headerbg2").sticky({topSpacing:120});
    }
  }
});