JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="main"></div>
<div id="theFixed"></div>

CSS

html { font-family:sans-serif;font-size:0.75em; }
#main { width:80%; }
#theFixed {
  position:fixed;
  top:250px;
  right:0;
  background-color:#eeeeee;
  width:75px;
  height:auto;
  padding:3px;
  margin:3px;
}

JavaScript

function setWidth() {
      var viewportW = parseInt($(window).width());
      // var viewportH = $(window).height();
    var theFixedW = parseInt($('#theFixed').css('width'));
    var padding = 10;
    var finalSize = viewportW - theFixedW - padding;
    console.log(finalSize);
    $('#main').css('width', finalSize);
  }
  $(window).scroll(function(){
        $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
  });
  $(window).resize(function() {
      setWidth();
  });
  setWidth();
  filler = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fugiat cumque facilis iste, saepe itaque reprehenderit esse, nemo excepturi sunt porro inventore consectetur earum quisquam consequatur! Delectus, nemo? Quidem, repellendus.<br /><br />";
   $('#theFixed').html(filler);
  var filled = "";
  var i = 0;
  while (i < 25) {
      filled += filler;
          i++;
  }

  $('#main').html(filled);