<nav class="navbar">
    <ul>
      <li><a class="tab" href="#home">Home</a></li>
      <li><a class="tab" href="#services">Services</a></li>
      <li><a class="tab" href="#about">About</a></li>
      <li><a class="tab" href="#contact">Contact</a></li>
    </ul>
  </nav>
  <div>
    <div id="home" class="page">Home</div>
    <div id="services" class="page">Services</div>
    <div id="about" class="page">About</div>
    <div id="contact" class="page">Contact</div>
  </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

ul {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  background-color: #000000;
}

li a {
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: white;
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
  transition: border-color 0.7s;
}

li a:hover, .activeTab {
  border-color: rgb(255, 231, 231);
}

.page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: xx-large;
}

.page:nth-child(even){
  background-color: rgb(255, 231, 231);
}

const tabs = document.querySelectorAll(".tab")
const pages = document.querySelectorAll(".page")
const scrollToTop = document.querySelector(".scrollToTop")

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(entry.target);
      const index = Array.from(pages).indexOf(entry.target)
      tabs.forEach(tab => {
        tab.classList.remove("activeTab")
      })
      tabs[index].classList.add("activeTab")
    }
  })
}, {
  threshold: 0.25,
})


pages.forEach(page => {
  observer.observe(page)
})