Intersection observer API instead of the scroll event

JavaScript
7

I just used the pseudo element on the body to show the message.

body:after{
  content:"Scrolled 30%";
  position:fixed;
  width:200px;
  height:200px;
  display:flex;
  text-align:center;
  justify-content:center;
  align-items:center;
  border:5px solid #000;
  left:0;
  right:0;
  bottom:0;
  top:0;
  margin:auto;
  box-shadow:0 0 20px 20px rgba(0,0,0,0.5);
  background:red;
  font-size:1.5rem;
  opacity:0;
  transition:.5s ease;
}
body.active:after{
  opacity:1;
}

You can use a real element if you want.

Is that what you meant?

1 Like