JSFiddle - React, Tailwind, and code Playground

by SamHasler

HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur suscipit erat vitae massa. Phasellus ut est. Nullam eu urna. Nulla facilisi. Praesent sollicitudin, mauris ut fermentum suscipit, eros ante adipiscing risus, a facilisis orci quam in magna. Proin accumsan nibh ac arcu. Pellentesque pellentesque lorem vel lectus. Aenean sit amet augue. Proin non orci. Ut adipiscing eros ut tortor. Fusce convallis, nisi a euismod dignissim, sem augue adipiscing ante, accumsan vehicula neque nisl id felis.<p/>
<table class="sticky--relative">
  <thead class="header js-sticky">
      <tr class="header-row">
          <th style="background: lightblue;"></th
         ><th style="background: indianred;">Heading 1</th
         ><th style="background: lightyellow;">Heading 2</th
         ><th style="background: lightgreen;">Heading 3</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>sa;dlkfhsad</td>
          <td>ksadljfhdsakl</td>
          <td>ldkshj jklsdfkl jsdf</td>
      </tr>
      <tr>
          <td>2</td>
          <td>sda;klfjakslj fhksalfha;dlkfhsad</td>
          <td>xc.mv,lniovnioelmknv ksadljfhdsakl</td>
          <td>kmsvivuvnk kjs h</td>
      </tr>
      <tr>
          <td>3</td>
          <td>kdmb kjsdbh</td>
          <td>dflk gdkljf nklfjd bn</td>
          <td>dfjklfksdjvn cjndlkj</td>
      </tr>
      <tr>
          <td>1</td>
          <td>sa;dlkfhsad</td>
          <td>ksadljfhdsakl</td>
          <td>ldkshj jklsdfkl jsdf</td>
      </tr>
      <tr>
          <td>2</td>
          <td>sda;klfjakslj fhksalfha;dlkfhsad</td>
          <td>xc.mv,lniovnioelmknv ksadljfhdsakl</td>
          <td>kmsvivuvnk kjs h</td>
      </tr>
      <tr>
          <td>3</td>
          <td>kdmb kjsdbh</td>
          <td>dflk gdkljf nklfjd bn</td>
          <td>dfjklfksdjvn cjndlkj</td>
      </tr>
      <tr>
          <td>1</td>
          <td>sa;dlkfhsad</td>
          <td>ksadljfhdsakl</td>
          <td>ldkshj jklsdfkl jsdf</td>
   ...

SCSS

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
    padding-top:20px;
}


  .sticky:not(thead)
, .sticky__clone {
  position: fixed;
  top: 0;
}
.sticky-tall {
  position: fixed;
  top: auto!important;
  bottom: 0;
}

.sticky__dummy,
.sticky__clone {
  display: none;
  .sticky + &,
  .sticky-tall + & {
    display: block;
  }
}

.sticky__clone {
  padding: 0;
  tr{
    display: block;
    th {
      display: inline-block;
    }
  }
}





.fixedsticky {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
}
/* When position: sticky is supported but native behavior is ignored */
.fixedsticky-withoutfixedfixed .fixedsticky-off,
.fixed-supported .fixedsticky-off {
	position: static;
}
.fixedsticky-withoutfixedfixed .fixedsticky-on,
.fixed-supported .fixedsticky-on {
	position: fixed;
}
.fixedsticky-dummy {
	display: none;
}
.fixedsticky-on + .fixedsticky-dummy {
	display: block;
}

JavaScript

(function (logger, $) {

/**
 *   Makes an element stick to the top/bottom of the viewport
 *
 *   Current position:sticky polyfills don't work with table headers:
 *
 * - http://codepen.io/FWeinb/pen/xLakC
 * - https://github.com/matthewp/position--sticky-
 * - https://github.com/filamentgroup/fixed-sticky
 *
 *   This has a fix for them based on:
 *
 * - http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
 * - Cloning table headers:
 *    - http://stackoverflow.com/questions/4709390
 *    - http://jsfiddle.net/andrewwhitaker/fj8wM/
 *
 *   USAGE
 *
 * - add .js-sticky to element
 * - Don't use on elements with margins
 * - You must set top/bottom in css to offset/stack from top/bottom.
 *   (.js-sticky sets top:0 as a default.)
 *   DON'T style using .js-sticky, use separate style names so implementation can change.
 *
 *   TODO
 *
 * - Fallback to native position:sticky if supported.
 * - Package into module combined with _sticky.scss
 * - Fix colspan not supported for thead width
 * - Sticky activation not recalculated after resize (non-tbody)
 */
window.addStickyBehaviour = function addStickyBehaviour(selector) {

  var newcss=".sticky--relative {position: relative;}"
            +".sticky:not(thead){position:fixed;top:0;}"
            +".sticky-tall{position:fixed;top:auto!important;bottom:0;}"
            +".sticky__dummy,.sticky__clone{display:none;}"
            +" .sticky+.sticky__dummy"
            +",.sticky-tall+.sticky__dummy"
            +",.sticky+.sticky__clone"
            +",.sticky+tbody+.sticky__clone"
            +",.sticky-tall+.sticky__clone{position:fixed;display:block;top:0!important;}"
            +".sticky-bottom+tbody+.sticky__clone {position: absolute;display: table-header-group;}"
            +".sticky__orig:not(.sticky,.sticky-bottom) + tbody + .sticky__clone {top: initial!important;}"
            +".sticky__clone{padding:0;}"
            +".sticky__clone tr{display:block;}"
           ...