<nav>
  <ul className="n-list">
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#about">About</a>
          </li>
          
        </ul>
</nav>

<section>
  <div id= "home">
    <div class= "text">
      <h2> This is it</h2>
      <p>I am Sticky</p>
    </div>
  </div>
    <div id= "about"></div>
  <div id= "s"> d</div>
  <div id= "r"> d</div>
  
</section>

*{
  padding: 0;
  margin: 0;
  
}

nav{
  background-color: #000B49;
  height: 70px;
  width: 100%;
  
  
}

ul{
    display: flex;
    list-style-type: none;
    justify-content: space-evenly;
    align-items: center;
}

ul li a{
  text-decoration: none;
  color: #fff;
  font-size: 2rem;
}


section{
  width: 100%;
}

section > *{
  height: calc(100vh - 70px);
  width: 100%;
}

#home{
  background-color: #9B0000;
  display: grid;
  place-items: center;
  height: 60%;
  position: sticky;
  top: 0;
}

.text{
  text-align: center;
  background-color: #fff;
  padding: 3rem;
  margin-bottom: 1rem
  
}


#about{
  background-color: #FF7272;
  
}

#s{
  background-color: #FFB5B5;
}

#r{
  background-color: #FFf;
}