<nav class="nav">
       
        <ul class="nav__links">
          <li class="nav__item">
            <a class="nav__link" href="#section-1">Home</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#section-2">Operations</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#section-3">Funds</a>
          </li>
          <li class="nav__item">
            <a class="nav__link nav__link--btn btn--show-modal" href="#section-4"
              >Open account</a>
          </li>
           <li class="nav__item">
            <a class="nav__link nav__link--btn btn--show-modal" href="#section-5"
              >Close account</a
            >
          </li>
        </ul>
      </nav>
<div class="main">
  <div class="section" id="section-1">
    <h1>section-1</h1>
  </div>
  <div class="section" id="section-2">  <h1>section-2</h1></div>
  <div class="section" id="section-3">  <h1>section-3</h1></div>
  <div class="section" id="section-4">  <h1>section-4</h1></div>
  <div class="section" id="section-5">  <h1>section-5</h1></div>
</div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  
}
.nav {
  display: flex;
  justify-content:flex-start;
  align-items: center;
  height: auto;
  max-width: 100%;
  padding:10px 0 ;
  background-color:bisque;
  z-index:10;
 

}
.sticky{
position:sticky;
 top:0;
 
}



.nav__links {
  display: flex;
  align-items: center;
  list-style: none;
}


.nav__item {
  margin-left: 3vw;
}

.nav__link
{
  font-size: 1.7rem;
  font-weight: 400;
  color: inherit;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}

.main{
  max-width:100%;
  height:auto;

}
 
.section{
  max-width:100%;
  position:relative;
  height:38rem;
  background-color:#ff585f;
text-align:center;
  border-bottom:2px solid #000;
  text-transform:capitalize;
  padding-top:15%;
}

@media only screen and (max-width:700px){
  .nav{
    flex-direction:column;
    align-items:center
  }
  .nav__link{
     font-size:1.3rem;
    padding:5px 0;
    margin:0;
    text-align:center;
   

  }
  
  .nav__links {
    width:100%;
    display:table;
/*     flex-direction:column;
  align-items: center;
    justify-content:center; */

       
}
  .sticky{
position:relative;
 top:0;
 
}


}

const allLinks=document.querySelectorAll(".nav__link")
const navLink=document.querySelector(".nav__links");
const section1=document.getElementById("section-1")

navLink.addEventListener("click",function(e){
 e.preventDefault();
  if(e.target.classList.contains("nav__link")){
    const clicked=e.target.getAttribute("href");
document.querySelector(clicked).scrollIntoView({behavior:"smooth"});
    e.target.style.color="red";
    
  }
  // clearing the red color after 2sec
  setTimeout(()=>{allLinks.forEach((s,i)=>{
  if(e.target.color="red"){
    
       s.style.color="black";
      }
  })},2000)
})

const observers=new IntersectionObserver((entry)=>{
  const [entries]=entry;
  document.querySelector(".nav").classList.remove("sticky");
  if(!entries.isIntersecting){
    document.querySelector(".nav").classList.add("sticky");
  }
},{root:null,threshold:0,}
              )
observers.observe(section1)