JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<div class="hdr"><div class="hs"></div></div>
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />11111<br /><br />
<div class="content">
<div class="stikc"></div>
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
</div>
<div class="f"><div class="fs"></div></div>

CSS

.stikc  {
  position: -webkit-sticky;
  position: sticky;
  top: 25px;
  width: 500px;
  border: 10px solid red;
  border-radius: 10px;
}

.content {
  background: #bbb;
  transform: translate3d(20px, 25px, 0);
}

.hdr {
  position: fixed;
  z-index: 100;
  transform: translateY(-10px);
  top: 0px;
  width: 80%;
  height: 60px;
  border-radius: 30px;
  background: rgba(45, 127, 45, 0.5);
}

.hs {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 0px;
  height: 0px;
  background-color: red;
}

JavaScript

setTimeout(function() {
	console.log(document.querySelector('.hs').getBoundingClientRect());
}, 1000);