<div class="container">
  <div id="info"></div>
  <header></header>
  <main class="content">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
    <div class="box">Box 9</div>
    <div id="mybox" class="box">Box 10</div>
    <div class="box">Box 11</div>
    <div class="box">Box 12</div>
    <div class="box">Box 13</div>
    <div class="box">Box 14</div>
  </main>
  <footer></footer>
</div>

* {
  box-sizing: border-box;
}

.container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #000;
  display: grid;
}

header {
  height: 100px;
  background-color: yellow;
}

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.box {
  height: 200px;
  background-color: orange;
  margin: 10px;
  padding: 10px;
  color: #fff;
  text-align: center;
}
#mybox {
  border: 5px solid green;
}
#info {
  position: fixed;
  width: 50px;
  height: 20px;
  border: 2px solid red;
  right: 20px;
  font-wight: bold;
  text-align: center;
}

footer {
  height: 100px;
  background-color: cyan;
}
var io = new IntersectionObserver(
    entries => {
      let ratio = Math.round(parseFloat(entries[0].intersectionRatio.toString().substr(0, 4)) + "e+2"); document.getElementById('info').textContent = `${ratio}%`;
    },
    {
       threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
    }
);
// Start observing an element
io.observe(document.getElementById('mybox'));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.