JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<script src="https://tei.theok.gr/jquery.stickem.js"></script>
<div id="wrap">
  <div class="area" id="block0"></div>
  <div class="area stickem-container" id="block1">
    <h1 class="stickem">Test 1</h1>
  </div>
  <div class="area stickem-container" id="block2">
    <h1 class="stickem">Test 2</h1>
  </div>
  <div class="area stickem-container" id="block3">
    <h1 class="stickem">Test 3</h1>
  </div>
  <div class="area stickem-container" id="block4">
    <h1 class="stickem">Test 4</h1>
  </div>
</div>

CSS

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 100%;
}
#wrap {
  height: 100%
}
.area { 
    padding-bottom:0;
    position: relative;
}
.area::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#block0 {
  height: 100%!important;
}
h1 {
  padding: 0;
  height:100px;
  margin: 0;
  text-align: center;
  background: #ccc;
  width: 100%;
  opacity:.75;
  box-sizing:border-box;
}

.stickem-container {
  position: relative;
}

.stickit {
  position: fixed;
  top: 0;
  left: 0;
}

.stickit-end {
  bottom: 0;
  position: absolute;
  left: 0;
}

JavaScript

var heights = [];

$('.area').each(function() {

  $(this).height(Math.floor(Math.random() * (1000 - 400 + 1) + 400));

  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
	
  var randomHead = Math.floor(Math.random() * 16777215).toString(16);
  
  $(this).css('background-color', '#' + randomColor);
  
  $(this).children('h1').css('background-color', '#' + randomHead);

  var key = $(this).attr('id');

  var height = $(this).outerHeight(true);

  heights[key] = height;

})

/*console.log(heights);*/
console.log($('h1').height())
$('body').stickem();