JSFiddle - React, Tailwind, and code Playground

by Saurabh Sonawane

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="menu"></div>
<div class="sidepanel"></div>

CSS

body{
  margin:0;
  padding:0;
  height:1000px
}
.menu{
  width:100%;
  height:50px;
  background:#111111
}
.sidepanel{
  width:200px;
  height:200px;
  background:#888888;
  position:fixed;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}

.sidepanel.stick-top{
  margin-top:-50px
}

JavaScript

$(window).scroll(function() {
    if ($(".sidepanel").offset().top > 50) {
        $(".sidepanel").addClass("stick-top");
    } else {
        $(".sidepanel").removeClass("stick-top");
    }
});