JSFiddle - React, Tailwind, and code Playground

by cr0wn3r

HTML

<div id="sidebar">sidebar</div>

<!-- random stuff to force a scrollbar -->
<div id="content">content</div>

CSS

#sidebar { width:200px; height: 200px; background-color:red; float:left; display:inline; }

#content { height: 2000px; background-color: #ddd; width:100px; margin-left: 210px }

.fixed { position:fixed; top:0px }

JavaScript

// set up link to change div width
      $('#sidebar').click(function(){
          $(this).animate({width:100});                       
          console.log(this);
      });
      

      // set 
      var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
      $(window).scroll(function (event) {
        // what the y position of the scroll is
        var y = $(this).scrollTop();
      
        // whether that's below the form
        if (y >= top) {
          // if so, ad the fixed class
          $('#sidebar').addClass('fixed');
        } else {
          // otherwise remove it
          $('#sidebar').removeClass('fixed');
        }
          
        var x = $(this).scrollLeft();
          $('#sidebar').css({'left':'-'+x}); 
      });