JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<header>hola</header>

<div class="content">
  <div class="col1"><div class="box"></div></div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate commodi sint! Optio, laudantium expedita nihil harum tenetur, iure esse, vitae beatae, ex at totam facilis cupiditate. Nihil, optio, porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, quam aspernatur molestias rem quidem voluptates, alias ab quibusdam aut culpa veniam ut. Sequi ratione labore molestias amet itaque aliquid et.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, hic laborum totam, quisquam vitae atque eius quidem esse officia, eveniet commodi. Quis dolore facilis maiores quaerat corporis, nostrum temporibus sint!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet facere veritatis ratione ipsam repellat, ducimus sit asperiores quas cupiditate incidunt dolor reiciendis necessitatibus iusto doloribus quam optio accusamus obcaecati!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate commodi sint! Optio, laudantium expedita nihil harum tenetur, iure esse, vitae beatae, ex at totam facilis cupiditate. Nihil, optio, porro.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, quam aspernatur molestias rem quidem voluptates, alias ab quibusdam aut culpa veniam ut. Sequi ratione labore molestias amet itaque aliquid et.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, hic laborum totam, quisquam vitae atque eius quidem esse officia, eveniet commodi. Quis dolore facilis maiores quaerat corporis, nostrum temporibus sint!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet facere veritatis ratione ipsam repellat, ducimus sit asperiores quas cupiditate incidunt dolor reiciendis necessitatibus iusto doloribus quam optio accusamus obcaecati!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptate commodi sint! Optio, laudantium expedita nihil harum...

CSS

.col1, .col2{
    float: left;
  }
  .col1{
    width: 30%;
  }
  .col2{
    width: 70%;
  }

.box{
  width: 90%;
  height: 150px;
  background: crimson;
}
header. footer{
  background: #ccc;
  padding: 10px;
  text-align: center;
  display: block;
}

JavaScript

(function(a){a.isScrollToFixed=function(b){return !!a(b).data("ScrollToFixed")};a.ScrollToFixed=function(d,i){var m=this;m.$el=a(d);m.el=d;m.$el.data("ScrollToFixed",m);var c=false;var H=m.$el;var I;var F;var k;var e;var z;var E=0;var r=0;var j=-1;var f=-1;var u=null;var A;var g;function v(){H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed");f=-1;E=H.offset().top;r=H.offset().left;if(m.options.offsets){r+=(H.offset().left-H.position().left)}if(j==-1){j=r}I=H.css("position");c=true;if(m.options.bottom!=-1){H.trigger("preFixed.ScrollToFixed");x();H.trigger("fixed.ScrollToFixed")}}function o(){var J=m.options.limit;if(!J){return 0}if(typeof(J)==="function"){return J.apply(H)}return J}function q(){return I==="fixed"}function y(){return I==="absolute"}function h(){return !(q()||y())}function x(){if(!q()){var J=H[0].getBoundingClientRect();u.css({display:H.css("display"),width:J.width,height:J.height,"float":H.css("float")});cssOptions={"z-index":m.options.zIndex,position:"fixed",top:m.options.bottom==-1?t():"",bottom:m.options.bottom==-1?"":m.options.bottom,"margin-left":"0px"};if(!m.options.dontSetWidth){cssOptions.width=H.css("width")}H.css(cssOptions);H.addClass(m.options.baseClassName);if(m.options.className){H.addClass(m.options.className)}I="fixed"}}function b(){var K=o();var J=r;if(m.options.removeOffsets){J="";K=K-E}cssOptions={position:"absolute",top:K,left:J,"margin-left":"0px",bottom:""};if(!m.options.dontSetWidth){cssOptions.width=H.css("width")}H.css(cssOptions);I="absolute"}function l(){if(!h()){f=-1;u.css("display","none");H.css({"z-index":z,width:"",position:F,left:"",top:e,"margin-left":""});H.removeClass("scroll-to-fixed-fixed");if(m.options.className){H.removeClass(m.options.className)}I=null}}function w(J){if(J!=f){H.css("left",r-J);f=J}}function t(){var J=m.options.marginTop;if(!J){return 0}if(typeof(J)==="function"){return J.apply(H)}return J}function B(){if(!a.isScrollToFixed(H)||H.is(":hidden")){return}var M=c;var...