scrollTop

by Pranab Dey

HTML

<section></section>
<section></section>
<section></section>
<section></section>

CSS

body {
  margin: 0;
}

section {
  background: red;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow-x: hidden;
}

section:nth-child(odd) {
  background: green;
}

/* section:nth-child(1){
	height: 200px;
} */

.card {
  background: white;
  padding: 10px;
  text-align: center;
  position: fixed;
  right: 0%;
  top: 0;
  z-index: 2;
}

JavaScript

var sec = document.getElementsByTagName("section");
var p = document.querySelectorAll("p");

document.addEventListener("scroll", function(e) {
  var top = sec[0].clientHeight - this.body.scrollTop;
  //var dx = e.clientX; var dy = e.clientY;
  //p[1].innerHTML = top + " | " + dy;
  if (top === 0) sec[1].style.background = "yellow";
  else return false;
})