<!--

Forum question answer only:

https://www.sitepoint.com/community/t/observe-last-child-by-using-intersection-observer/402042/9

-->
<header>
  <h1>Start scrolling. This first background will scroll away.</h1>
</header>

<!-- sticky elements must be direct  child of body -->
<div class="bg bg1"></div>
<div class="section">
  <div class="text">
    <div style="margin-inline: 20px">
      <h1>Our Story</h1>
      <div class="story-detail">
        <p>
          We saw a gap between what people need and what banks offer. It
          means millions of us aren't getting the banking experience we
          deserve for different reasons.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="bg bg2"></div>
<div class="section">
  <div class="text">
    <div style="margin-inline: 20px">
      <div class="story-description">
        <p>
          Traditional banks don’t focus on customers' experience, their
          systems may be slow and outdated, they may prioritize a specific
          group of people, or perhaps they lack the ability to innovate,
          and so on.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="bg bg3"></div>
<div class="section">
  <div class="text">
    <div style="margin-inline: 20px">
      <div class="story-description">
        <p>
          So since we're passionate about solving problems and bridging
          gaps, we looked into and identified the challenges and
          capabilities we'll need to build a bank here in the Kingdom.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="bg bg4"></div>
<div class="section">
  <div class="text">
    <div style="margin-inline: 20px">
      <div class="story-description">
        <p>
          With the best local and international expertise, we began
          building an innovative digital bank designed by and for the
          people. We believe that the most effective way to build a bank
          for people is to do it with them. This is our philosophy. So, we
          started building it with the help of people like you.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="bg bg5"></div>
<div class="section">
  <div class="text">
    <div style="margin-inline: 20px">
      <div class="story-description">
        <p>
          At D360, innovation starts with someone’s passion for improving
          financial services. To that person, we say: Never stop offering
          solutions to your needs. These solutions will not only benefit
          you, but will significantly impact the lives of millions.
        </p>
      </div>
    </div>
  </div>
</div>

/*

Forum question answer only:

https://www.sitepoint.com/community/t/observe-last-child-by-using-intersection-observer/402042/9

*/

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
  margin: 0;
  padding: 1rem 0;
}
header {
  background: url(https://picsum.photos/id/1018/2000/1000) no-repeat 50% 50%;
  background-size: cover;
}
header,
footer,
.main {
  min-height: 100vh;
}

.section {
  min-height: 100vh;
  margin-top: -100vh;
  display: flex;
  z-index: 1;
  position: relative;
  background-size: cover;
}
.text {
  margin: auto;
}

.text p {
  font-family: "Lato";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 149%;
  color: #263244;
}

.text h1 {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 0px;
  color: #ffffff;
  margin: 0;
  padding: 1rem 0 3rem;
}

.text .story-detail {
  max-width: 321px;
  border-radius: 20px;
  background: radial-gradient(
    76.31% 191.89% at 13.43% 22.19%,
    rgba(226, 228, 231, 0.8) 0%,
    rgba(228, 228, 229, 0.368) 100%
  );
  -webkit-backdrop-filter: blur(20px); /* ios*/
  backdrop-filter: blur(10px);
  padding: 23px;
}

.text .story-description {
  max-width: 321px;
  border-radius: 20px;
  background: radial-gradient(
    76.31% 191.89% at 13.43% 22.19%,
    rgba(226, 228, 231, 0.8) 0%,
    rgba(228, 228, 229, 0.368) 100%
  );
  backdrop-filter: blur(10px);
  padding: 23px;
}

.bg {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: -1;
  border-top: 5px solid green;
  height: 100vh;
}
.bg1 {
  background: url(https://picsum.photos/id/200/2000/1000) no-repeat 50% 50%;
}
.bg2 {
  background: url(https://picsum.photos/id/201/2000/1000) no-repeat 50% 50%;
}
.bg3 {
  background: url(https://picsum.photos/id/202/2000/1000) no-repeat 50% 50%;
}
.bg4 {
  background: url(https://picsum.photos/id/203/2000/1000) no-repeat 50% 50%;
}
.bg5 {
  background: url(https://picsum.photos/id/204/2000/1000) no-repeat 50% 50%;
}

// nope