JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">



Ext.onReady(function(){
  
    var w = new Ext.Window({
      tbar: [{ text: 'A tbar item'}],
      bbar: [{ text: 'A bbar item'}],
      buttons: [{text: 'A button'}],
      width: 300,
      height: 200,
      html: '<p>test.</p>'
    });
    w.show();
});

</script>
<body>
    <div id="animTarget">
    </div>
</body>
</html>

CSS

#logo {
                        width:100%;
                        height:34px;
                }

                #toolbar {
                        position: fixed;
                        top: 35px;
                        z-index:1000;
                }

JavaScript

$(document).scroll( $.throttle( 250, scrolling ) ); 
                      
               function scrolling() {
                    if($(window).scrollTop() < 35)
                        $("#toolbar").animate({
                           top: 35 - $(window).scrollTop()
                       }, 250);
                 
                      else
                          
                   $("#toolbar").animate({
                           top: "0"
                       }, 250);
               }