JSFiddle - React, Tailwind, and code Playground

by dke358

HTML

<div id="container">
  <div id="leftNav">
      some crap here<br/>
      some crap here<br/>
      some crap here<br/>
      some crap here<br/>
      some crap here<br/>
      <div id="sticky">
        some sticky crap here<br/>
        some sticky crap here<br/>
        some sticky crap here<br/>
        some sticky crap here<br/>
      </div>    
  </div>
  
</div>

CSS

#sticky {
  background-color: red; 
  height:100px; 
  position: fixed; 
  width: 10%; 
  display:none;
}

#content{
  position: inline;
  bottom: 0px;
}

JavaScript

// show sticky div
var leftNav = $('#leftNav');
var leftNavHeight = leftNav.height();
console.log("leftNavHeight: " + leftNavHeight);
leftNav.css('height',leftNavHeight);
    
jQuery(window).scroll(function() {
		console.log("scrolltop" + jQuery(window).scrollTop());
    console.log("leftNavHeight22: " + leftNavHeight);
    
    if(jQuery(window).scrollTop() > leftNavHeight) {
        jQuery("#sticky").fadeIn();
    }
                    
    if(jQuery(window).scrollTop() <  leftNavHeight) {
         jQuery("#sticky").fadeOut();
    }   
 });