A Pen by zakariamouhid

Thumbnail
This awesome code was written by zakariamouhid, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright zakariamouhid ©
  • HTML
  • CSS
  • JavaScript
    <div></div>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>
<p>p element</p>

/*Downloaded from https://www.codeseek.co/zakariamouhid/a-pen-by-zakariamouhid-grXkzr */
    p {
  background-color: #FAFAFA;
  border: solid 1px #ddd;
  padding: 20px 0;
  border-radius: 3px;
  text-align: center;
  color: #424242;
  font-size: 16px;
  font-family: arial, sans-serif;
  font-weight: bold;
}
div {
  position: fixed;
  background-color: #333;
  padding: 23px 28px;
  color: #fff;
  font-family: arial, sans-serif;
  top: 0;
  left: 0;
}


/*Downloaded from https://www.codeseek.co/zakariamouhid/a-pen-by-zakariamouhid-grXkzr */
    var p = document.querySelectorAll("p"),
    div = document.querySelector("div"),
    body = document.body,
    p_number = 15,
    last_scrollTop = body.scrollTop;
div.innerHTML = "p[6].offsetTop = " + p[p_number].offsetTop + "px";
p[p_number].style.backgroundColor = "#F44336";
p[p_number].style.color = "#fff";

body.onscroll = function () {
  "use strict";
  div.innerHTML = "p[" + p_number + "].clientHeight = " + p[p_number].clientHeight + "px";
  div.innerHTML += "<br><br>p[" + p_number + "].offsetTop = " + p[p_number].offsetTop + "px";
  div.innerHTML += "<br><br>body.scrollTop = " + body.scrollTop + "px";
  div.innerHTML += "<br><br>body.clientHeight = " + body.clientHeight + "px";
  div.innerHTML += "<br><br>window.innerHeight = " + window.innerHeight + "px";
  if (
    p[p_number].offsetTop - window.innerHeight < body.scrollTop
    &&
    body.scrollTop - p[p_number].offsetTop < p[p_number].clientHeight
  ) {
    div.innerHTML += "<br><br>p[" + p_number + "] is show";
  } else {
    div.innerHTML += "<br><br>p[" + p_number + "] is hidden";
  }
  if (last_scrollTop > body.scrollTop) {
    div.innerHTML += "<br><br>scroll up";
  } else {
    div.innerHTML += "<br><br>scroll down";
  }
  last_scrollTop = body.scrollTop;
};

Comments