JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_wrap">
    <div id="header">
        <div id="header_carousel"> header carousel
        </div>
        <div id="site_menu"> site menu
            <div id="protools"> protools
            </div>
        </div>
    </div>
    <div id="main_content"> main content
    </div>
</div>

CSS

html, body {
  border: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 100%;
  overflow-x: hidden;
}

#site_menu {
  background: yellow;
  height: 88px;
  width: 100%;
}

#protools {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  right: -100%;
  margin-right: 0;
    background: green;
  -webkit-transition: right 0.3s ease-out, margin-right 0.3s ease-out;
  -khtml-transition: right 0.3s ease-out, margin-right 0.3s ease-out;
  -moz-transition: right 0.3s ease-out, margin-right 0.3s ease-out;
  -ms-transition: right 0.3s ease-out, margin-right 0.3s ease-out;

  &.open {
    right: 0%;
    margin-right: -437px;
  }
}

#main_content {
  width: 100%;
  height: 2000px;
  background: white;
  position: relative;
  padding-top: 276px;
}

JavaScript

$(function(){
    $(window).on("scroll", function(e){
    console.log("scrolling");    
    });
});