JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="test" class="adiv pos1">TEST</div>


<div class="page">

GET SCROLL DISTANCE & BROWSER WIDTH IN PIXELS

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

Browser Width:
<div id="mydiv2" class="mydiv2"></div>
Try resizing the window

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

Scroll Distance = <span id="mydiv1" class="mydiv1">0px</span> --- When this hits 200px the header will shrink

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>

CSS

body {margin:0;}

.page {margin-top:140px;}

.adiv {width:100%;background-color:#dedede;position:fixed;top:0;}

.pos1 {height:120px;line-height:120px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}

.pos2 {height:60px;line-height:60px;transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;}

JavaScript

function getwidth() {

var var1 = document.getElementById("mydiv2").clientWidth;

document.getElementById("mydiv2").innerText = var1 + "px";

}

window.onresize = getwidth;




function getscroll() {
var currentY = window.pageYOffset;
var div = document.getElementById("test");
if (currentY > 200) {div.className = "adiv pos2";}
else {div.className = "adiv pos1";}
document.getElementById("mydiv1").innerText = currentY + "px";
}
window.onscroll = getscroll;