I am creating a Whatsapp Navbar, and I am having a problem with the sticky navbar.

see below for details

let navItems = document.querySelectorAll(".nav-item");

// adding a css variable that count how many items there is, to make the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    // changing a css variable, and all the logic is in CSS
    document.body.style.setProperty("--index", `${index}`);
    toogleActive();

    function toogleActive() {
      // for setting opacity low to other not clicked icons
      navItems.forEach((itemWithClass) => {
        itemWithClass.classList.remove("active");
      });

      // making visible the active clicked item
      item.classList.add("active");
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
}

nav .nav-item {
  flex: 1;
  display: grid;
  place-items: center;
  opacity: 0.5;
  transition: opacity var(--anim-speed);
}

nav .nav-item:active {
  background-color: rgba(255, 255, 255, 0.2);
}

nav .nav-item.active {
  opacity: 1;
}

nav::before {
  --indicator-width: calc(100% / var(--total-nav-items));
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 100px;
  background-color: var(--text-color);
  bottom: 0;
  width: var(--indicator-width);
  left: calc(var(--index, 0) * var(--indicator-width));
  transition: left var(--anim-speed);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

#container {
  /* border: 5px solid red; */
  /* position: fixed; */
  position: relative;
  z-index: -1;
  /* height: calc(100vh - var(--nav-height)); */
  left: calc(-1 * (var(--index, 0) * 100vw));
  transition: left var(--anim-speed);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100vw;
}

#container>* {
  /* border: 2px solid red; */
  height: calc(100vh - var(--nav-height));
  padding: 0 1rem;
}

@media (prefers-color-scheme: dark) {
   :root {
    --nav-bg: rgb(31, 44, 52);
    --text-color: rgb(9, 148, 115);
  }
}

<header>
  <span>Whatsapp</span>
</header>

<nav>
  <div >hello 1</div>
  <div >hello 2</div>
  <div >hello 3</div>
  <div >hello 4</div>
  <div >hello 5</div>
</nav>

<div id="container">
  <!-- 1 -->
  <section>
    <h1>PAGE 1</h1>
    <p>
      <!-- see the fifth for the longest paragraph -->
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem blanditiis sunt nulla porro dolor totam itaque saepe aliquam similique quibusdam placeat rem eum, perspiciatis, delectus iste praesentium. Quod, expedita magnam.
    </p>
  </section>

  <!-- 2 -->
  <section>
    <h1>PAGE 2</h1>
    <p>
      Expedita saepe quibusdam nostrum iure aliquam earum voluptatibus maiores in eligendi, amet officia vitae error porro perferendis quaerat eum. Voluptatum vitae laudantium velit voluptate corrupti ab a fugiat iste ducimus!
    </p>
  </section>

  <!-- 3 -->
  <section>
    <h1>PAGE 3</h1>
    <p>
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
    </p>
  </section>

  <!-- 4 -->
  <section>
    <h1>PAGE 4</h1>
    <p>
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
    </p>
  </section>

  <!-- 5 -->
  <section>
    <h1>PAGE 5</h1>
    <p>
      <!-- this is very long for a reason -->
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed? Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Quis aliquam iure laudantium cum est neque ipsam error accusantium dolores, corporis dicta quo, voluptatem nostrum, veniam doloremque illo explicabo ipsa dolor. Quasi odio obcaecati, ad amet, repudiandae laborum facilis
      repellat magni a corrupti enim? Quidem repudiandae ullam, sequi aliquid voluptate vitae, ipsa tempora, reprehenderit adipisci optio fugit perferendis libero hic. Nobis? Quo quod dicta vel fugiat magni suscipit, ad cum quibusdam eaque repudiandae,
      veritatis sequi. Doloremque consequuntur quis porro fugiat delectus, sit, alias, temporibus ipsam perspiciatis ea aspernatur vitae tempora provident. Similique rerum alias, nostrum vero, doloribus porro ut labore fuga aperiam ullam, aspernatur veritatis
      minus omnis atque assumenda nesciunt! Magni animi dignissimos, fuga qui deleniti quae a? Eius, autem exercitationem? Illo officiis reiciendis doloribus quis non iste harum assumenda vero, et eaque? Recusandae, eius ipsa excepturi accusantium dolorum
      quidem nisi error vitae aspernatur adipisci porro, eaque eveniet asperiores corrupti dicta. Eos quae id recusandae aliquam, suscipit consequatur, iste, quas dignissimos ea enim voluptas beatae esse? Facere quas, eos assumenda, ea voluptatum dolores
      eligendi incidunt, blanditiis laboriosam maxime obcaecati sint officia. Nihil at enim optio aut tempora quia, esse sint deserunt eaque. Molestiae mollitia illum odit corporis eum neque odio libero, dolores veritatis explicabo enim quidem rem illo
      natus maxime cumque! Non laudantium ab veniam culpa dignissimos. Fugiat esse, laboriosam perspiciatis atque accusantium iste sint eaque autem iusto aut! Corrupti voluptatum voluptate dicta et, inventore placeat autem quidem nihil similique. Sit.
      Totam quasi facere iste recusandae molestias! Eius hic natus velit unde. Deleniti sit vero magnam velit, voluptas, voluptatibus temporibus ipsam eum tempore eius ad ex atque repellat pariatur laborum est. Labore, voluptate! Nihil esse animi nisi
      enim at? Harum, cupiditate. Maiores molestiae vitae provident iure magnam laboriosam, assumenda minima reprehenderit autem neque voluptatem perferendis ex quos optio voluptates sit laudantium? Dolores quasi maxime sed quos! Hic doloribus, vel molestias,
      commodi magnam ducimus incidunt suscipit perferendis quis a accusantium earum vitae, similique facilis. Repellat corrupti ullam quod incidunt adipisci quibusdam id? Vero aliquid velit recusandae quibusdam similique nam inventore? Iusto maiores voluptatum
      consectetur incidunt, architecto natus ducimus labore minima! Delectus cum repellat voluptatem cumque fugit labore magni quod! Nam, aspernatur est? Laborum porro soluta modi enim similique cumque non voluptatum inventore excepturi pariatur deserunt
      sapiente magnam ad obcaecati asperiores laudantium, quaerat fugit consequatur? Sunt adipisci eveniet blanditiis delectus consequuntur, quibusdam aspernatur! Nobis culpa, cum consectetur repellat architecto voluptates est, quo eveniet dicta, excepturi
      repellendus asperiores autem voluptatum voluptas et. Aliquid reprehenderit repellendus sint dolor illum velit tenetur dignissimos laborum animi placeat? Ex totam reprehenderit libero cum maxime voluptates modi perspiciatis. Facilis perferendis est
      commodi natus eius esse? In, quisquam delectus voluptatibus magni molestiae vero illo sunt ea, excepturi eligendi, hic expedita! Vero deserunt aspernatur veniam repellendus architecto quibusdam maxime molestias quia saepe. Earum repellendus quasi
      molestias ab aperiam quisquam tempora sit, hic incidunt! Odio exercitationem unde ipsam vitae amet et odit! Mollitia, iste! Inventore facere cum nemo, obcaecati tempora aliquam est corrupti quis delectus suscipit nostrum optio fugit perspiciatis
      consequatur distinctio autem adipisci temporibus vero eveniet, qui saepe accusantium? Labore, odio! Aliquam sed incidunt repudiandae placeat minus quam! Officiis suscipit doloribus, voluptatibus minima, hic veniam quisquam ratione distinctio, reprehenderit
      placeat vero! Iusto magni nobis qui dolores vero distinctio modi magnam consequuntur! Magnam, a, aliquam quibusdam beatae ea dolor nemo quisquam eligendi nesciunt fugiat perspiciatis assumenda, illo id exercitationem nisi debitis sint mollitia.
      Omnis cupiditate beatae deleniti nisi id maiores atque perspiciatis. Minima, repudiandae eos expedita asperiores libero modi autem architecto voluptas provident sequi quis laudantium pariatur mollitia vero fuga quam dolores ipsum cum animi nihil
      eaque cupiditate impedit nobis non. Esse. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias numquam blanditiis iure dicta exercitationem? Fuga animi exercitationem eius totam unde atque corrupti nam. Deleniti ut consequatur porro hic
      numquam maxime? Soluta excepturi architecto cumque exercitationem pariatur, dignissimos voluptas blanditiis, culpa provident sed, corporis earum quia et? Delectus, fuga rem. Temporibus pariatur neque mollitia praesentium ea dolorum quo a unde eos!
      Voluptatibus pariatur exercitationem quod sit quis velit quisquam odit atque libero cum nihil ex aliquam obcaecati impedit quas sapiente sint fugit, ipsa neque quae eligendi quo officia? Provident, fugit repellat. Eaque aliquam quasi hic voluptatum
      eius. Natus quos rerum incidunt laudantium enim iusto deleniti. Magnam doloremque, soluta obcaecati ipsa quibusdam perferendis accusantium odio, reiciendis impedit ut cumque! Beatae, quibusdam iusto. Voluptas corrupti modi quos minus laborum ea
      soluta excepturi officia veritatis eum esse, corporis, laboriosam et voluptatibus deserunt molestias tenetur molestiae. Accusamus sequi sapiente provident. Quasi incidunt ipsa nam in? Repellendus optio tenetur ex dolores ducimus nihil porro esse
      tempore aspernatur veniam officia incidunt voluptate temporibus ut, a praesentium repellat enim pariatur eum magni voluptatem? Rerum commodi molestiae delectus veritatis! Dolor corrupti impedit quaerat sapiente, voluptate numquam expedita nam repellendus,
      repudiandae commodi consectetur. Eos quis fugit, alias, voluptatum qui nam et harum architecto autem doloribus quidem similique maiores quae necessitatibus? Et magnam praesentium veniam in nisi minus laudantium porro, iusto doloribus fuga architecto
      accusantium provident voluptatum, itaque eum ab deserunt quod nostrum quibusdam? Nihil quidem architecto excepturi esse quisquam dolorum. Saepe dolor voluptatibus perferendis veniam quibusdam corrupti quasi atque ad eius labore. Consectetur, suscipit
      eius ullam quasi sint illo tempora aut dignissimos, molestiae esse impedit. Enim mollitia ab nesciunt fugit. Voluptas ad fugit molestiae officiis doloremque eos, accusamus soluta distinctio animi sed odit facere dolores. Illo asperiores autem eos
      illum nesciunt doloribus repellat corporis nostrum odio atque, voluptatem veniam labore. Accusamus minus rerum modi voluptatum accusantium saepe eveniet porro dolores impedit fugiat beatae, inventore aperiam. Quis ipsam vero quod cum ipsa aut sapiente,
      ducimus harum nesciunt sint, repellat nobis cupiditate. Nemo laudantium necessitatibus, fugit temporibus cumque repellat ad molestias explicabo ex dolore rem assumenda sit animi facere quasi tempore voluptatem unde! Ipsam magnam eum doloribus deserunt
      voluptatum minus fuga sed? Cupiditate voluptatem nulla rerum, officiis obcaecati quae optio est, quaerat distinctio debitis porro quo blanditiis sint repellat? Modi suscipit qui molestiae, assumenda alias in aliquid esse, autem praesentium error
      doloremque! Iusto amet porro doloribus, deleniti molestias reprehenderit fugiat et magnam. Ducimus ratione recusandae earum, nemo ad excepturi consequuntur pariatur eius doloribus laboriosam similique tenetur veniam fugit! Quibusdam tempore illum
      architecto. Pariatur expedita nihil perspiciatis delectus repellendus suscipit corporis! Quo eum quam recusandae. Quaerat, numquam aperiam, totam reprehenderit veritatis hic ab in et enim quo saepe culpa sit iste tempora aspernatur. Consequuntur
      dolor quia, quo facere vitae optio laudantium repudiandae similique ex sed placeat expedita doloribus aliquam a atque cumque iste maiores repellendus eveniet natus tempora ducimus amet aut. Esse, similique! Ex sint ut, nesciunt sapiente tempora
      autem repudiandae illum dignissimos! Ducimus, fugiat ad est non cum quos explicabo alias distinctio debitis eveniet at illum. Veniam officiis pariatur quasi exercitationem minus. Fugiat assumenda accusamus at consequuntur fuga ipsa temporibus sapiente
      inventore dolores a incidunt iste veritatis nam harum dolor asperiores velit maiores, perspiciatis fugit laboriosam, facere quis? Laudantium, reiciendis aut! Hic. Ullam atque tempora assumenda. Dignissimos odio ex, facilis placeat recusandae eum
      repudiandae quae quia doloribus nihil minus voluptatem, esse consectetur quas mollitia et quo quos ab delectus assumenda, saepe fugiat? Neque necessitatibus iure iusto fugiat corporis, officiis possimus tenetur? Facere minus beatae id. Voluptas,
      iure dignissimos reprehenderit similique dolore tenetur odit inventore dolor enim, consectetur expedita quaerat dolores quam recusandae. Corrupti magni atque voluptatibus aspernatur itaque ducimus officia fugiat qui perferendis minima odio quam
      cumque iusto minus doloribus ipsam explicabo, modi ratione. Libero, facere aperiam possimus asperiores reiciendis odio quas. Aspernatur, error accusantium! Delectus, dolore a reprehenderit, quidem, quas repellendus cum alias consequuntur voluptatibus
      aspernatur praesentium vitae porro eos sunt dolor numquam minima. Provident inventore architecto tempore incidunt, quas amet. Esse dolor corporis nisi earum perspiciatis exercitationem illum eveniet accusantium nulla qui hic doloremque est reiciendis
      autem nobis, aperiam repudiandae incidunt consectetur. Officiis, suscipit atque quisquam tenetur esse distinctio tempore. Vel possimus repellat minima asperiores nesciunt dignissimos dolores cupiditate officiis porro, nihil tenetur fugit accusamus,
      fugiat delectus ab, deserunt vero debitis hic nam veritatis laboriosam ipsa illum odio. Impedit, non! Repellendus accusantium quasi veritatis nam. Excepturi, numquam. Soluta omnis est officia vitae eligendi. Maiores, nemo praesentium. Debitis nostrum
      nam beatae commodi nobis ex nemo iure ipsum, alias pariatur placeat quod! Laudantium ipsam voluptate expedita nam dolorem ad ducimus aut minima similique quis dolores nemo blanditiis placeat, incidunt facilis illo nulla, distinctio ex. Delectus
      voluptates, impedit quam voluptate aliquam aperiam. Nihil. Autem, ipsa provident quasi fuga veniam impedit illo vitae eligendi recusandae neque soluta, maxime, voluptatem laudantium voluptatibus officiis incidunt vero perspiciatis quidem. Repellat
      reprehenderit repudiandae laudantium minima recusandae, porro necessitatibus? Impedit sequi voluptatem iusto! Quos laudantium architecto consequatur ducimus aperiam assumenda facilis facere praesentium impedit quae beatae dolorem aut sequi fuga
      asperiores explicabo quas, amet magnam minus? Deleniti, molestiae reprehenderit. Voluptates id illum qui exercitationem voluptas incidunt quae autem aspernatur doloremque! Fugiat veniam eos assumenda quos, dolore quibusdam non quis autem incidunt
      facere ipsam repudiandae atque animi labore? Debitis, ea! Maxime nemo, nulla sit explicabo laudantium minima quia? Minima quaerat, fugiat id esse aspernatur, placeat quos eos et impedit quae ducimus! Nesciunt corporis provident, dolores accusantium
      minima quod unde fugit. Assumenda, voluptas nam necessitatibus consequatur, sint ea ut quis asperiores porro tempore eum impedit omnis perferendis similique incidunt maxime laboriosam dolorum odio aliquam voluptatibus ab nesciunt nihil? Autem, officia
      nihil? Quam iure consequuntur repellat temporibus sapiente optio exercitationem, incidunt id vero ullam eos voluptatem veniam, blanditiis harum, ad nostrum a placeat rerum aliquid asperiores saepe! Eveniet neque saepe magni dolor. A, facilis repellendus.
      Blanditiis, facilis. Cum necessitatibus repellat autem mollitia assumenda voluptate minus delectus aspernatur! Soluta suscipit quasi architecto vel cum unde esse rerum, animi veniam quos atque ipsa temporibus. Excepturi dolores natus distinctio
      qui a debitis unde, nihil, consequuntur aliquam veritatis doloribus eius nostrum et sint quisquam laborum facere at iste quas fuga, possimus illo dignissimos maxime sapiente? Optio. Fuga aut nam in culpa dolor dignissimos, ratione quisquam ullam
      eligendi velit aspernatur, quasi laboriosam, laborum totam adipisci. Est, aliquam! Repellendus voluptate perferendis cum impedit assumenda ex doloremque obcaecati temporibus? Rerum, nostrum consectetur facilis iusto in dolor cumque qui! Facere accusamus
      animi pariatur suscipit optio repellat ipsa labore, veritatis repudiandae aliquid aut itaque quos, autem rem odio vel officiis voluptate? Quas, nulla consequatur asperiores soluta libero minima praesentium sed adipisci magnam suscipit. Facilis quas
      hic error laboriosam totam, dicta facere consequatur commodi dolorum numquam? Praesentium vel facilis eligendi laudantium accusamus! Suscipit natus ducimus aspernatur, labore id autem quasi sed obcaecati et! Corporis, nihil perferendis eveniet ducimus
      odit a consectetur alias, similique nisi tenetur exercitationem, voluptas quisquam aliquid consequuntur totam pariatur? Quasi iste expedita ad? Magnam repellat quisquam animi quae. Explicabo illum id, quis dolores est rem dicta placeat optio ducimus
      sed, et voluptas? Sequi reiciendis omnis quis at harum repudiandae! Perspiciatis magni id minima soluta culpa ut numquam tempore natus rerum distinctio, atque consequatur rem, placeat officiis quam ad, ducimus tenetur adipisci vero quod! Facilis
      dicta odio voluptatum consequatur laudantium. Ipsam cumque dolore dicta illum voluptate assumenda in reprehenderit maxime eaque, deleniti dolorem minus itaque ex officiis earum ad libero excepturi! Quae, ex nemo sint obcaecati placeat corporis?
      Molestiae, vel. Beatae nobis quos dolorum animi iure incidunt ipsa corrupti. Placeat voluptates ab rem blanditiis provident tempora veniam dicta tenetur dolor voluptate officiis quia reiciendis, et ut quas impedit? Nisi, dolor! Veniam nihil ipsam
      blanditiis laboriosam, itaque, placeat exercitationem temporibus tenetur eligendi unde reiciendis laudantium quis, optio quod. Vitae, cupiditate cum praesentium explicabo tempora soluta nemo est provident, labore neque saepe? Rem neque veniam molestiae
      maiores enim eos dicta minus consequuntur dolores atque molestias blanditiis commodi voluptas reprehenderit, voluptate aperiam perspiciatis nesciunt quasi unde ab magni nulla! Et, obcaecati? Expedita, aliquam? Dolor quaerat cumque veritatis ipsa
      eum dicta doloremque eveniet aut vel minus, quis eius ex id tempora, saepe alias, numquam aperiam omnis quibusdam consequatur hic? Corporis quidem delectus est ad? Temporibus omnis, autem, consequuntur dolorem eligendi perferendis doloremque neque
      mollitia molestias possimus dignissimos molestiae veniam facere? Molestiae quisquam eaque voluptates itaque cum voluptatibus eveniet iste, fugit, quam dolores totam neque. Quia harum dolores beatae quod vitae repellat sit. Perspiciatis blanditiis
      autem animi corporis minus ducimus reiciendis explicabo obcaecati consectetur molestiae vero dolore, doloribus iure cumque maxime esse? Aut, repudiandae nemo! Expedita hic a saepe facilis eos illo unde esse? Minus labore laboriosam natus, illum
      dolorem nihil et porro pariatur nam aperiam dolore! Dignissimos nobis accusamus debitis dolor quisquam, id asperiores? Facilis eius dolorum quasi cupiditate nostrum mollitia illo, vero culpa rem facere earum fuga doloribus officiis tenetur voluptates
      perferendis sed temporibus sunt rerum molestias iure totam. Eaque doloribus quia reiciendis! Sint aliquid, ratione eaque iusto architecto sunt cum laudantium quaerat officiis commodi porro. Quaerat magnam ex nihil maxime hic corporis architecto
      dignissimos, totam cum, veniam, officiis tenetur quae velit saepe.
    </p>
  </section>
</div>

the sticky is ✅ working fine,

❌ but the problem if I am viewing in another page that has a little text,
the scrollbar still appears.

this is because they follow the height of the container that have inside the section. and since the container have inside 5 sections nested it will have only the bigger height.

so in this example "page 5" have a lot of text and is creating the scrollbar.

so I want that if I am in "page 1" there isn't any sticky functionality, no scrollbar.
if page 5 then yes, we add that scrollbar and then we have also sticky functionality.

this is difficult since I have a page transition on it.

edit: now I find also a solution myself :)

function disactivateScroll() {
  let navHeight = document.querySelector("nav").offsetHeight;
  let minHeightSection = window.innerHeight - (navHeight * 2);

  if(sections[index].offsetHeight > minHeightSection) {
    document.body.style.overflowY = "auto";
  } else {
    document.body.style.overflowY = "hidden";
  }
}

body {
 overflow: hidden;
}

let navItems = document.querySelectorAll(".nav-item");
let sections = document.querySelectorAll("#container > *");

// adding a css variable that count how many items there is, to make the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    // changing a css variable, and all the logic is in CSS
    document.body.style.setProperty("--index", `${index}`);
    toogleActive();
    disactivateScroll();

    function toogleActive() {
      // for setting opacity low to other not clicked icons
      navItems.forEach((itemWithClass) => {
        itemWithClass.classList.remove("active");
      });

      // making visible the active clicked item
      item.classList.add("active");
    }

    function disactivateScroll() {
      let navHeight = document.querySelector("nav").offsetHeight;
      let minHeightSection = window.innerHeight - (navHeight * 2);

      if (sections[index].offsetHeight > minHeightSection) {
        document.body.style.overflowY = "auto";
      } else {
        document.body.style.overflowY = "hidden";
      }
    }

  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
}

nav .nav-item {
  flex: 1;
  display: grid;
  place-items: center;
  opacity: 0.5;
  transition: opacity var(--anim-speed);
}

nav .nav-item:active {
  background-color: rgba(255, 255, 255, 0.2);
}

nav .nav-item.active {
  opacity: 1;
}

nav::before {
  --indicator-width: calc(100% / var(--total-nav-items));
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 100px;
  background-color: var(--text-color);
  bottom: 0;
  width: var(--indicator-width);
  left: calc(var(--index, 0) * var(--indicator-width));
  transition: left var(--anim-speed);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

#container {
  /* border: 5px solid red; */
  /* position: fixed; */
  position: relative;
  z-index: -1;
  /* height: calc(100vh - var(--nav-height)); */
  left: calc(-1 * (var(--index, 0) * 100vw));
  transition: left var(--anim-speed);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100vw;
}

#container>* {
  /* border: 2px solid red; */
  height: min-content;
  min-height: calc(100vh - (var(--nav-height) * 2));
  padding: 0 1rem;
  border: 5px solid red;
}

@media (prefers-color-scheme: dark) {
   :root {
    --nav-bg: rgb(31, 44, 52);
    --text-color: rgb(9, 148, 115);
  }
}

CodePudding user response：

you can use position: absolute to remove elements from the document flow:

let navItems = document.querySelectorAll(".nav-item");
const sections = Array.from(document.querySelectorAll("#container > section"));

sections.forEach((section, index) => section.style.setProperty("--section", index));

// adding a css variable that count how many items there is, to make the logic.
document.body.style.setProperty("--total-nav-items", `${navItems.length}`);

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {
    // changing a css variable, and all the logic is in CSS
    document.body.style.setProperty("--index", `${index}`);
    toogleActive();

    function toogleActive() {
      // for setting opacity low to other not clicked icons
      navItems.forEach((itemWithClass) => {
        itemWithClass.classList.remove("active");
      });

      sections.forEach((section, sectionIndex) => section.classList.toggle("active", sectionIndex === index))

      // making visible the active clicked item
      item.classList.add("active");
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
  z-index: 1;
}

nav .nav-item {
  flex: 1;
  display: grid;
  place-items: center;
  opacity: 0.5;
  transition: opacity var(--anim-speed);
}

nav .nav-item:active {
  background-color: rgba(255, 255, 255, 0.2);
}

nav .nav-item.active {
  opacity: 1;
}

nav::before {
  --indicator-width: calc(100% / var(--total-nav-items));
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 100px;
  background-color: var(--text-color);
  bottom: 0;
  width: var(--indicator-width);
  left: calc(var(--index, 0) * var(--indicator-width));
  transition: left var(--anim-speed);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

#container {
  position: relative;
  overflow-y: hidden;
}

#container>* {
  position: absolute;
  padding: var(--nav-height) 1rem 0;
  width: 100%;
  left: calc(100vw * (var(--section) - var(--index, 0)));
  transition: left var(--anim-speed);
}

#container > .active { 
  position: relative;
}

@media (prefers-color-scheme: dark) {
   :root {
    --nav-bg: rgb(31, 44, 52);
    --text-color: rgb(9, 148, 115);
  }
}

<header>
  <span>Whatsapp</span>
</header>

<nav>
  <div >hello 1</div>
  <div >hello 2</div>
  <div >hello 3</div>
  <div >hello 4</div>
  <div >hello 5</div>
</nav>

<div id="container">
  <!-- 1 -->
  <section >
    <h1>PAGE 1</h1>
    <p>
      <!-- see the fifth for the longest paragraph -->
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem blanditiis sunt nulla porro dolor totam itaque saepe aliquam similique quibusdam placeat rem eum, perspiciatis, delectus iste praesentium. Quod, expedita magnam.
    </p>
  </section>

  <!-- 2 -->
  <section>
    <h1>PAGE 2</h1>
    <p>
      Expedita saepe quibusdam nostrum iure aliquam earum voluptatibus maiores in eligendi, amet officia vitae error porro perferendis quaerat eum. Voluptatum vitae laudantium velit voluptate corrupti ab a fugiat iste ducimus!
    </p>
  </section>

  <!-- 3 -->
  <section>
    <h1>PAGE 3</h1>
    <p>
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
    </p>
  </section>

  <!-- 4 -->
  <section>
    <h1>PAGE 4</h1>
    <p>
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
    </p>
  </section>

  <!-- 5 -->
  <section>
    <h1>PAGE 5</h1>
    <p>
      <!-- this is very long for a reason -->
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed? Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Quis aliquam iure laudantium cum est neque ipsam error accusantium dolores, corporis dicta quo, voluptatem nostrum, veniam doloremque illo explicabo ipsa dolor. Quasi odio obcaecati, ad amet, repudiandae laborum facilis
      repellat magni a corrupti enim? Quidem repudiandae ullam, sequi aliquid voluptate vitae, ipsa tempora, reprehenderit adipisci optio fugit perferendis libero hic. Nobis? Quo quod dicta vel fugiat magni suscipit, ad cum quibusdam eaque repudiandae,
      veritatis sequi. Doloremque consequuntur quis porro fugiat delectus, sit, alias, temporibus ipsam perspiciatis ea aspernatur vitae tempora provident. Similique rerum alias, nostrum vero, doloribus porro ut labore fuga aperiam ullam, aspernatur veritatis
      minus omnis atque assumenda nesciunt! Magni animi dignissimos, fuga qui deleniti quae a? Eius, autem exercitationem? Illo officiis reiciendis doloribus quis non iste harum assumenda vero, et eaque? Recusandae, eius ipsa excepturi accusantium dolorum
      quidem nisi error vitae aspernatur adipisci porro, eaque eveniet asperiores corrupti dicta. Eos quae id recusandae aliquam, suscipit consequatur, iste, quas dignissimos ea enim voluptas beatae esse? Facere quas, eos assumenda, ea voluptatum dolores
      eligendi incidunt, blanditiis laboriosam maxime obcaecati sint officia. Nihil at enim optio aut tempora quia, esse sint deserunt eaque. Molestiae mollitia illum odit corporis eum neque odio libero, dolores veritatis explicabo enim quidem rem illo
      natus maxime cumque! Non laudantium ab veniam culpa dignissimos. Fugiat esse, laboriosam perspiciatis atque accusantium iste sint eaque autem iusto aut! Corrupti voluptatum voluptate dicta et, inventore placeat autem quidem nihil similique. Sit.
      Totam quasi facere iste recusandae molestias! Eius hic natus velit unde. Deleniti sit vero magnam velit, voluptas, voluptatibus temporibus ipsam eum tempore eius ad ex atque repellat pariatur laborum est. Labore, voluptate! Nihil esse animi nisi
      enim at? Harum, cupiditate. Maiores molestiae vitae provident iure magnam laboriosam, assumenda minima reprehenderit autem neque voluptatem perferendis ex quos optio voluptates sit laudantium? Dolores quasi maxime sed quos! Hic doloribus, vel molestias,
      commodi magnam ducimus incidunt suscipit perferendis quis a accusantium earum vitae, similique facilis. Repellat corrupti ullam quod incidunt adipisci quibusdam id? Vero aliquid velit recusandae quibusdam similique nam inventore? Iusto maiores voluptatum
      consectetur incidunt, architecto natus ducimus labore minima! Delectus cum repellat voluptatem cumque fugit labore magni quod! Nam, aspernatur est? Laborum porro soluta modi enim similique cumque non voluptatum inventore excepturi pariatur deserunt
      sapiente magnam ad obcaecati asperiores laudantium, quaerat fugit consequatur? Sunt adipisci eveniet blanditiis delectus consequuntur, quibusdam aspernatur! Nobis culpa, cum consectetur repellat architecto voluptates est, quo eveniet dicta, excepturi
      repellendus asperiores autem voluptatum voluptas et. Aliquid reprehenderit repellendus sint dolor illum velit tenetur dignissimos laborum animi placeat? Ex totam reprehenderit libero cum maxime voluptates modi perspiciatis. Facilis perferendis est
      commodi natus eius esse? In, quisquam delectus voluptatibus magni molestiae vero illo sunt ea, excepturi eligendi, hic expedita! Vero deserunt aspernatur veniam repellendus architecto quibusdam maxime molestias quia saepe. Earum repellendus quasi
      molestias ab aperiam quisquam tempora sit, hic incidunt! Odio exercitationem unde ipsam vitae amet et odit! Mollitia, iste! Inventore facere cum nemo, obcaecati tempora aliquam est corrupti quis delectus suscipit nostrum optio fugit perspiciatis
      consequatur distinctio autem adipisci temporibus vero eveniet, qui saepe accusantium? Labore, odio! Aliquam sed incidunt repudiandae placeat minus quam! Officiis suscipit doloribus, voluptatibus minima, hic veniam quisquam ratione distinctio, reprehenderit
      placeat vero! Iusto magni nobis qui dolores vero distinctio modi magnam consequuntur! Magnam, a, aliquam quibusdam beatae ea dolor nemo quisquam eligendi nesciunt fugiat perspiciatis assumenda, illo id exercitationem nisi debitis sint mollitia.
      Omnis cupiditate beatae deleniti nisi id maiores atque perspiciatis. Minima, repudiandae eos expedita asperiores libero modi autem architecto voluptas provident sequi quis laudantium pariatur mollitia vero fuga quam dolores ipsum cum animi nihil
      eaque cupiditate impedit nobis non. Esse. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias numquam blanditiis iure dicta exercitationem? Fuga animi exercitationem eius totam unde atque corrupti nam. Deleniti ut consequatur porro hic
      numquam maxime? Soluta excepturi architecto cumque exercitationem pariatur, dignissimos voluptas blanditiis, culpa provident sed, corporis earum quia et? Delectus, fuga rem. Temporibus pariatur neque mollitia praesentium ea dolorum quo a unde eos!
      Voluptatibus pariatur exercitationem quod sit quis velit quisquam odit atque libero cum nihil ex aliquam obcaecati impedit quas sapiente sint fugit, ipsa neque quae eligendi quo officia? Provident, fugit repellat. Eaque aliquam quasi hic voluptatum
      eius. Natus quos rerum incidunt laudantium enim iusto deleniti. Magnam doloremque, soluta obcaecati ipsa quibusdam perferendis accusantium odio, reiciendis impedit ut cumque! Beatae, quibusdam iusto. Voluptas corrupti modi quos minus laborum ea
      soluta excepturi officia veritatis eum esse, corporis, laboriosam et voluptatibus deserunt molestias tenetur molestiae. Accusamus sequi sapiente provident. Quasi incidunt ipsa nam in? Repellendus optio tenetur ex dolores ducimus nihil porro esse
      tempore aspernatur veniam officia incidunt voluptate temporibus ut, a praesentium repellat enim pariatur eum magni voluptatem? Rerum commodi molestiae delectus veritatis! Dolor corrupti impedit quaerat sapiente, voluptate numquam expedita nam repellendus,
      repudiandae commodi consectetur. Eos quis fugit, alias, voluptatum qui nam et harum architecto autem doloribus quidem similique maiores quae necessitatibus? Et magnam praesentium veniam in nisi minus laudantium porro, iusto doloribus fuga architecto
      accusantium provident voluptatum, itaque eum ab deserunt quod nostrum quibusdam? Nihil quidem architecto excepturi esse quisquam dolorum. Saepe dolor voluptatibus perferendis veniam quibusdam corrupti quasi atque ad eius labore. Consectetur, suscipit
      eius ullam quasi sint illo tempora aut dignissimos, molestiae esse impedit. Enim mollitia ab nesciunt fugit. Voluptas ad fugit molestiae officiis doloremque eos, accusamus soluta distinctio animi sed odit facere dolores. Illo asperiores autem eos
      illum nesciunt doloribus repellat corporis nostrum odio atque, voluptatem veniam labore. Accusamus minus rerum modi voluptatum accusantium saepe eveniet porro dolores impedit fugiat beatae, inventore aperiam. Quis ipsam vero quod cum ipsa aut sapiente,
      ducimus harum nesciunt sint, repellat nobis cupiditate. Nemo laudantium necessitatibus, fugit temporibus cumque repellat ad molestias explicabo ex dolore rem assumenda sit animi facere quasi tempore voluptatem unde! Ipsam magnam eum doloribus deserunt
      voluptatum minus fuga sed? Cupiditate voluptatem nulla rerum, officiis obcaecati quae optio est, quaerat distinctio debitis porro quo blanditiis sint repellat? Modi suscipit qui molestiae, assumenda alias in aliquid esse, autem praesentium error
      doloremque! Iusto amet porro doloribus, deleniti molestias reprehenderit fugiat et magnam. Ducimus ratione recusandae earum, nemo ad excepturi consequuntur pariatur eius doloribus laboriosam similique tenetur veniam fugit! Quibusdam tempore illum
      architecto. Pariatur expedita nihil perspiciatis delectus repellendus suscipit corporis! Quo eum quam recusandae. Quaerat, numquam aperiam, totam reprehenderit veritatis hic ab in et enim quo saepe culpa sit iste tempora aspernatur. Consequuntur
      dolor quia, quo facere vitae optio laudantium repudiandae similique ex sed placeat expedita doloribus aliquam a atque cumque iste maiores repellendus eveniet natus tempora ducimus amet aut. Esse, similique! Ex sint ut, nesciunt sapiente tempora
      autem repudiandae illum dignissimos! Ducimus, fugiat ad est non cum quos explicabo alias distinctio debitis eveniet at illum. Veniam officiis pariatur quasi exercitationem minus. Fugiat assumenda accusamus at consequuntur fuga ipsa temporibus sapiente
      inventore dolores a incidunt iste veritatis nam harum dolor asperiores velit maiores, perspiciatis fugit laboriosam, facere quis? Laudantium, reiciendis aut! Hic. Ullam atque tempora assumenda. Dignissimos odio ex, facilis placeat recusandae eum
      repudiandae quae quia doloribus nihil minus voluptatem, esse consectetur quas mollitia et quo quos ab delectus assumenda, saepe fugiat? Neque necessitatibus iure iusto fugiat corporis, officiis possimus tenetur? Facere minus beatae id. Voluptas,
      iure dignissimos reprehenderit similique dolore tenetur odit inventore dolor enim, consectetur expedita quaerat dolores quam recusandae. Corrupti magni atque voluptatibus aspernatur itaque ducimus officia fugiat qui perferendis minima odio quam
      cumque iusto minus doloribus ipsam explicabo, modi ratione. Libero, facere aperiam possimus asperiores reiciendis odio quas. Aspernatur, error accusantium! Delectus, dolore a reprehenderit, quidem, quas repellendus cum alias consequuntur voluptatibus
      aspernatur praesentium vitae porro eos sunt dolor numquam minima. Provident inventore architecto tempore incidunt, quas amet. Esse dolor corporis nisi earum perspiciatis exercitationem illum eveniet accusantium nulla qui hic doloremque est reiciendis
      autem nobis, aperiam repudiandae incidunt consectetur. Officiis, suscipit atque quisquam tenetur esse distinctio tempore. Vel possimus repellat minima asperiores nesciunt dignissimos dolores cupiditate officiis porro, nihil tenetur fugit accusamus,
      fugiat delectus ab, deserunt vero debitis hic nam veritatis laboriosam ipsa illum odio. Impedit, non! Repellendus accusantium quasi veritatis nam. Excepturi, numquam. Soluta omnis est officia vitae eligendi. Maiores, nemo praesentium. Debitis nostrum
      nam beatae commodi nobis ex nemo iure ipsum, alias pariatur placeat quod! Laudantium ipsam voluptate expedita nam dolorem ad ducimus aut minima similique quis dolores nemo blanditiis placeat, incidunt facilis illo nulla, distinctio ex. Delectus
      voluptates, impedit quam voluptate aliquam aperiam. Nihil. Autem, ipsa provident quasi fuga veniam impedit illo vitae eligendi recusandae neque soluta, maxime, voluptatem laudantium voluptatibus officiis incidunt vero perspiciatis quidem. Repellat
      reprehenderit repudiandae laudantium minima recusandae, porro necessitatibus? Impedit sequi voluptatem iusto! Quos laudantium architecto consequatur ducimus aperiam assumenda facilis facere praesentium impedit quae beatae dolorem aut sequi fuga
      asperiores explicabo quas, amet magnam minus? Deleniti, molestiae reprehenderit. Voluptates id illum qui exercitationem voluptas incidunt quae autem aspernatur doloremque! Fugiat veniam eos assumenda quos, dolore quibusdam non quis autem incidunt
      facere ipsam repudiandae atque animi labore? Debitis, ea! Maxime nemo, nulla sit explicabo laudantium minima quia? Minima quaerat, fugiat id esse aspernatur, placeat quos eos et impedit quae ducimus! Nesciunt corporis provident, dolores accusantium
      minima quod unde fugit. Assumenda, voluptas nam necessitatibus consequatur, sint ea ut quis asperiores porro tempore eum impedit omnis perferendis similique incidunt maxime laboriosam dolorum odio aliquam voluptatibus ab nesciunt nihil? Autem, officia
      nihil? Quam iure consequuntur repellat temporibus sapiente optio exercitationem, incidunt id vero ullam eos voluptatem veniam, blanditiis harum, ad nostrum a placeat rerum aliquid asperiores saepe! Eveniet neque saepe magni dolor. A, facilis repellendus.
      Blanditiis, facilis. Cum necessitatibus repellat autem mollitia assumenda voluptate minus delectus aspernatur! Soluta suscipit quasi architecto vel cum unde esse rerum, animi veniam quos atque ipsa temporibus. Excepturi dolores natus distinctio
      qui a debitis unde, nihil, consequuntur aliquam veritatis doloribus eius nostrum et sint quisquam laborum facere at iste quas fuga, possimus illo dignissimos maxime sapiente? Optio. Fuga aut nam in culpa dolor dignissimos, ratione quisquam ullam
      eligendi velit aspernatur, quasi laboriosam, laborum totam adipisci. Est, aliquam! Repellendus voluptate perferendis cum impedit assumenda ex doloremque obcaecati temporibus? Rerum, nostrum consectetur facilis iusto in dolor cumque qui! Facere accusamus
      animi pariatur suscipit optio repellat ipsa labore, veritatis repudiandae aliquid aut itaque quos, autem rem odio vel officiis voluptate? Quas, nulla consequatur asperiores soluta libero minima praesentium sed adipisci magnam suscipit. Facilis quas
      hic error laboriosam totam, dicta facere consequatur commodi dolorum numquam? Praesentium vel facilis eligendi laudantium accusamus! Suscipit natus ducimus aspernatur, labore id autem quasi sed obcaecati et! Corporis, nihil perferendis eveniet ducimus
      odit a consectetur alias, similique nisi tenetur exercitationem, voluptas quisquam aliquid consequuntur totam pariatur? Quasi iste expedita ad? Magnam repellat quisquam animi quae. Explicabo illum id, quis dolores est rem dicta placeat optio ducimus
      sed, et voluptas? Sequi reiciendis omnis quis at harum repudiandae! Perspiciatis magni id minima soluta culpa ut numquam tempore natus rerum distinctio, atque consequatur rem, placeat officiis quam ad, ducimus tenetur adipisci vero quod! Facilis
      dicta odio voluptatum consequatur laudantium. Ipsam cumque dolore dicta illum voluptate assumenda in reprehenderit maxime eaque, deleniti dolorem minus itaque ex officiis earum ad libero excepturi! Quae, ex nemo sint obcaecati placeat corporis?
      Molestiae, vel. Beatae nobis quos dolorum animi iure incidunt ipsa corrupti. Placeat voluptates ab rem blanditiis provident tempora veniam dicta tenetur dolor voluptate officiis quia reiciendis, et ut quas impedit? Nisi, dolor! Veniam nihil ipsam
      blanditiis laboriosam, itaque, placeat exercitationem temporibus tenetur eligendi unde reiciendis laudantium quis, optio quod. Vitae, cupiditate cum praesentium explicabo tempora soluta nemo est provident, labore neque saepe? Rem neque veniam molestiae
      maiores enim eos dicta minus consequuntur dolores atque molestias blanditiis commodi voluptas reprehenderit, voluptate aperiam perspiciatis nesciunt quasi unde ab magni nulla! Et, obcaecati? Expedita, aliquam? Dolor quaerat cumque veritatis ipsa
      eum dicta doloremque eveniet aut vel minus, quis eius ex id tempora, saepe alias, numquam aperiam omnis quibusdam consequatur hic? Corporis quidem delectus est ad? Temporibus omnis, autem, consequuntur dolorem eligendi perferendis doloremque neque
      mollitia molestias possimus dignissimos molestiae veniam facere? Molestiae quisquam eaque voluptates itaque cum voluptatibus eveniet iste, fugit, quam dolores totam neque. Quia harum dolores beatae quod vitae repellat sit. Perspiciatis blanditiis
      autem animi corporis minus ducimus reiciendis explicabo obcaecati consectetur molestiae vero dolore, doloribus iure cumque maxime esse? Aut, repudiandae nemo! Expedita hic a saepe facilis eos illo unde esse? Minus labore laboriosam natus, illum
      dolorem nihil et porro pariatur nam aperiam dolore! Dignissimos nobis accusamus debitis dolor quisquam, id asperiores? Facilis eius dolorum quasi cupiditate nostrum mollitia illo, vero culpa rem facere earum fuga doloribus officiis tenetur voluptates
      perferendis sed temporibus sunt rerum molestias iure totam. Eaque doloribus quia reiciendis! Sint aliquid, ratione eaque iusto architecto sunt cum laudantium quaerat officiis commodi porro. Quaerat magnam ex nihil maxime hic corporis architecto
      dignissimos, totam cum, veniam, officiis tenetur quae velit saepe.
    </p>
  </section>
</div>

CodePudding user response：

I've edited your snippet to get the desired effect for your code. What I changed was moving from using CSS variables to "push" the content to different areas of the screen to change the visibility, I simply created two states for your sections:

• active (Flexbox)
• inactive (Invisible)

Then, switching from a grid display to using flexbox on the sections allows for the scroll behavior desired. I also set a fixed max height on active sections and a reactive bottom padding to make it nice for the user. These aspects are adjustable to your desire, however.

Hopefully this helps and I'd be more than happy to explain my answer in more detail

let navItems = document.querySelectorAll(".nav-item");
let sections = Array.from(document.getElementById("container").children);

//Initially make all other sections inactive except the first
sections.forEach((section, index) => {
  if(index == 0) section.classList.add("active-section");
  else section.classList.add("inactive-section");
});

navItems.forEach((item, index) => {
  item.addEventListener("click", () => {

    toogleActive(index);

    function toogleActive(index) {
      // for setting opacity low to other not clicked icons
      navItems.forEach(itemWithClass => {
        itemWithClass.classList.remove("active");
      });
      
      //Make sections visible or invisible based on nav item clicked
      sections.forEach((section, i) => {
        if(i != index) {
          section.classList.remove("active-section");
          section.classList.add("inactive-section");
        } else {
        section.classList.remove("inactive-section");
          section.classList.add("active-section");
        }
      });

      // making visible the active clicked item
      item.classList.add("active");
    }
  });
});

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
:root {
  --nav-height: 3rem;
  --nav-bg: rgb(0, 128, 105);
  --text-color: white;
  --anim-speed: 0.5s;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  display: grid;
  place-items: center start;
}

nav {
  display: flex;
  height: var(--nav-height);
  background-color: var(--nav-bg);
  color: var(--text-color);
  text-transform: uppercase;
  font-family: poppins;
  user-select: none;
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  position: sticky;
  top: 0;
  width: 100vw;
}

nav .nav-item {
  flex: 1;
  display: grid;
  place-items: center;
  opacity: 0.5;
  transition: opacity var(--anim-speed);
}

nav .nav-item:active {
  background-color: rgba(255, 255, 255, 0.2);
}

nav .nav-item.active {
  opacity: 1;
}

nav::before {
  --indicator-width: calc(100% / var(--total-nav-items));
  content: "";
  position: absolute;
  height: 0.2rem;
  width: 100px;
  background-color: var(--text-color);
  bottom: 0;
  width: var(--indicator-width);
  left: calc(var(--index, 0) * var(--indicator-width));
  transition: left var(--anim-speed);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

#container {
  position: fixed;
  top: --nav-height
  display: flex;
  height: 100vh;
}

.active-section {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: scroll;
    padding: 5%;
    padding-bottom: 10%;
}

.inactive-section {
    display: none;
}

@media (prefers-color-scheme: dark) {
   :root {
    --nav-bg: rgb(31, 44, 52);
    --text-color: rgb(9, 148, 115);
  }
}

<header>
  <span>Whatsapp</span>
</header>

<nav>
  <div >hello 1</div>
  <div >hello 2</div>
  <div >hello 3</div>
  <div >hello 4</div>
  <div >hello 5</div>
</nav>

<div id="container">
  <!-- 1 -->
  <section>
    <h1>PAGE 1</h1>
    <p>
      <!-- see the fifth for the longest paragraph -->
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem blanditiis sunt nulla porro dolor totam itaque saepe aliquam similique quibusdam placeat rem eum, perspiciatis, delectus iste praesentium. Quod, expedita magnam.
    </p>
  </section>

  <!-- 2 -->
  <section>
    <h1>PAGE 2</h1>
    <p>
      Expedita saepe quibusdam nostrum iure aliquam earum voluptatibus maiores in eligendi, amet officia vitae error porro perferendis quaerat eum. Voluptatum vitae laudantium velit voluptate corrupti ab a fugiat iste ducimus!
    </p>
  </section>

  <!-- 3 -->
  <section>
    <h1>PAGE 3</h1>
    <p>
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
    </p>
  </section>

  <!-- 4 -->
  <section>
    <h1>PAGE 4</h1>
    <p>
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed?
    </p>
  </section>

  <!-- 5 -->
  <section>
    <h1>PAGE 5</h1>
    <p>
      <!-- this is very long for a reason -->
      Incidunt ipsa tempora quos cumque quaerat quo praesentium repellat aut error? Est exercitationem magnam alias itaque vero aspernatur doloremque ad omnis reprehenderit libero debitis ea consequuntur, repudiandae non numquam sed? Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Quis aliquam iure laudantium cum est neque ipsam error accusantium dolores, corporis dicta quo, voluptatem nostrum, veniam doloremque illo explicabo ipsa dolor. Quasi odio obcaecati, ad amet, repudiandae laborum facilis
      repellat magni a corrupti enim? Quidem repudiandae ullam, sequi aliquid voluptate vitae, ipsa tempora, reprehenderit adipisci optio fugit perferendis libero hic. Nobis? Quo quod dicta vel fugiat magni suscipit, ad cum quibusdam eaque repudiandae,
      veritatis sequi. Doloremque consequuntur quis porro fugiat delectus, sit, alias, temporibus ipsam perspiciatis ea aspernatur vitae tempora provident. Similique rerum alias, nostrum vero, doloribus porro ut labore fuga aperiam ullam, aspernatur veritatis
      minus omnis atque assumenda nesciunt! Magni animi dignissimos, fuga qui deleniti quae a? Eius, autem exercitationem? Illo officiis reiciendis doloribus quis non iste harum assumenda vero, et eaque? Recusandae, eius ipsa excepturi accusantium dolorum
      quidem nisi error vitae aspernatur adipisci porro, eaque eveniet asperiores corrupti dicta. Eos quae id recusandae aliquam, suscipit consequatur, iste, quas dignissimos ea enim voluptas beatae esse? Facere quas, eos assumenda, ea voluptatum dolores
      eligendi incidunt, blanditiis laboriosam maxime obcaecati sint officia. Nihil at enim optio aut tempora quia, esse sint deserunt eaque. Molestiae mollitia illum odit corporis eum neque odio libero, dolores veritatis explicabo enim quidem rem illo
      natus maxime cumque! Non laudantium ab veniam culpa dignissimos. Fugiat esse, laboriosam perspiciatis atque accusantium iste sint eaque autem iusto aut! Corrupti voluptatum voluptate dicta et, inventore placeat autem quidem nihil similique. Sit.
      Totam quasi facere iste recusandae molestias! Eius hic natus velit unde. Deleniti sit vero magnam velit, voluptas, voluptatibus temporibus ipsam eum tempore eius ad ex atque repellat pariatur laborum est. Labore, voluptate! Nihil esse animi nisi
      enim at? Harum, cupiditate. Maiores molestiae vitae provident iure magnam laboriosam, assumenda minima reprehenderit autem neque voluptatem perferendis ex quos optio voluptates sit laudantium? Dolores quasi maxime sed quos! Hic doloribus, vel molestias,
      commodi magnam ducimus incidunt suscipit perferendis quis a accusantium earum vitae, similique facilis. Repellat corrupti ullam quod incidunt adipisci quibusdam id? Vero aliquid velit recusandae quibusdam similique nam inventore? Iusto maiores voluptatum
      consectetur incidunt, architecto natus ducimus labore minima! Delectus cum repellat voluptatem cumque fugit labore magni quod! Nam, aspernatur est? Laborum porro soluta modi enim similique cumque non voluptatum inventore excepturi pariatur deserunt
      sapiente magnam ad obcaecati asperiores laudantium, quaerat fugit consequatur? Sunt adipisci eveniet blanditiis delectus consequuntur, quibusdam aspernatur! Nobis culpa, cum consectetur repellat architecto voluptates est, quo eveniet dicta, excepturi
      repellendus asperiores autem voluptatum voluptas et. Aliquid reprehenderit repellendus sint dolor illum velit tenetur dignissimos laborum animi placeat? Ex totam reprehenderit libero cum maxime voluptates modi perspiciatis. Facilis perferendis est
      commodi natus eius esse? In, quisquam delectus voluptatibus magni molestiae vero illo sunt ea, excepturi eligendi, hic expedita! Vero deserunt aspernatur veniam repellendus architecto quibusdam maxime molestias quia saepe. Earum repellendus quasi
      molestias ab aperiam quisquam tempora sit, hic incidunt! Odio exercitationem unde ipsam vitae amet et odit! Mollitia, iste! Inventore facere cum nemo, obcaecati tempora aliquam est corrupti quis delectus suscipit nostrum optio fugit perspiciatis
      consequatur distinctio autem adipisci temporibus vero eveniet, qui saepe accusantium? Labore, odio! Aliquam sed incidunt repudiandae placeat minus quam! Officiis suscipit doloribus, voluptatibus minima, hic veniam quisquam ratione distinctio, reprehenderit
      placeat vero! Iusto magni nobis qui dolores vero distinctio modi magnam consequuntur! Magnam, a, aliquam quibusdam beatae ea dolor nemo quisquam eligendi nesciunt fugiat perspiciatis assumenda, illo id exercitationem nisi debitis sint mollitia.
      Omnis cupiditate beatae deleniti nisi id maiores atque perspiciatis. Minima, repudiandae eos expedita asperiores libero modi autem architecto voluptas provident sequi quis laudantium pariatur mollitia vero fuga quam dolores ipsum cum animi nihil
      eaque cupiditate impedit nobis non. Esse. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias numquam blanditiis iure dicta exercitationem? Fuga animi exercitationem eius totam unde atque corrupti nam. Deleniti ut consequatur porro hic
      numquam maxime? Soluta excepturi architecto cumque exercitationem pariatur, dignissimos voluptas blanditiis, culpa provident sed, corporis earum quia et? Delectus, fuga rem. Temporibus pariatur neque mollitia praesentium ea dolorum quo a unde eos!
      Voluptatibus pariatur exercitationem quod sit quis velit quisquam odit atque libero cum nihil ex aliquam obcaecati impedit quas sapiente sint fugit, ipsa neque quae eligendi quo officia? Provident, fugit repellat. Eaque aliquam quasi hic voluptatum
      eius. Natus quos rerum incidunt laudantium enim iusto deleniti. Magnam doloremque, soluta obcaecati ipsa quibusdam perferendis accusantium odio, reiciendis impedit ut cumque! Beatae, quibusdam iusto. Voluptas corrupti modi quos minus laborum ea
      soluta excepturi officia veritatis eum esse, corporis, laboriosam et voluptatibus deserunt molestias tenetur molestiae. Accusamus sequi sapiente provident. Quasi incidunt ipsa nam in? Repellendus optio tenetur ex dolores ducimus nihil porro esse
      tempore aspernatur veniam officia incidunt voluptate temporibus ut, a praesentium repellat enim pariatur eum magni voluptatem? Rerum commodi molestiae delectus veritatis! Dolor corrupti impedit quaerat sapiente, voluptate numquam expedita nam repellendus,
      repudiandae commodi consectetur. Eos quis fugit, alias, voluptatum qui nam et harum architecto autem doloribus quidem similique maiores quae necessitatibus? Et magnam praesentium veniam in nisi minus laudantium porro, iusto doloribus fuga architecto
      accusantium provident voluptatum, itaque eum ab deserunt quod nostrum quibusdam? Nihil quidem architecto excepturi esse quisquam dolorum. Saepe dolor voluptatibus perferendis veniam quibusdam corrupti quasi atque ad eius labore. Consectetur, suscipit
      eius ullam quasi sint illo tempora aut dignissimos, molestiae esse impedit. Enim mollitia ab nesciunt fugit. Voluptas ad fugit molestiae officiis doloremque eos, accusamus soluta distinctio animi sed odit facere dolores. Illo asperiores autem eos
      illum nesciunt doloribus repellat corporis nostrum odio atque, voluptatem veniam labore. Accusamus minus rerum modi voluptatum accusantium saepe eveniet porro dolores impedit fugiat beatae, inventore aperiam. Quis ipsam vero quod cum ipsa aut sapiente,
      ducimus harum nesciunt sint, repellat nobis cupiditate. Nemo laudantium necessitatibus, fugit temporibus cumque repellat ad molestias explicabo ex dolore rem assumenda sit animi facere quasi tempore voluptatem unde! Ipsam magnam eum doloribus deserunt
      voluptatum minus fuga sed? Cupiditate voluptatem nulla rerum, officiis obcaecati quae optio est, quaerat distinctio debitis porro quo blanditiis sint repellat? Modi suscipit qui molestiae, assumenda alias in aliquid esse, autem praesentium error
      doloremque! Iusto amet porro doloribus, deleniti molestias reprehenderit fugiat et magnam. Ducimus ratione recusandae earum, nemo ad excepturi consequuntur pariatur eius doloribus laboriosam similique tenetur veniam fugit! Quibusdam tempore illum
      architecto. Pariatur expedita nihil perspiciatis delectus repellendus suscipit corporis! Quo eum quam recusandae. Quaerat, numquam aperiam, totam reprehenderit veritatis hic ab in et enim quo saepe culpa sit iste tempora aspernatur. Consequuntur
      dolor quia, quo facere vitae optio laudantium repudiandae similique ex sed placeat expedita doloribus aliquam a atque cumque iste maiores repellendus eveniet natus tempora ducimus amet aut. Esse, similique! Ex sint ut, nesciunt sapiente tempora
      autem repudiandae illum dignissimos! Ducimus, fugiat ad est non cum quos explicabo alias distinctio debitis eveniet at illum. Veniam officiis pariatur quasi exercitationem minus. Fugiat assumenda accusamus at consequuntur fuga ipsa temporibus sapiente
      inventore dolores a incidunt iste veritatis nam harum dolor asperiores velit maiores, perspiciatis fugit laboriosam, facere quis? Laudantium, reiciendis aut! Hic. Ullam atque tempora assumenda. Dignissimos odio ex, facilis placeat recusandae eum
      repudiandae quae quia doloribus nihil minus voluptatem, esse consectetur quas mollitia et quo quos ab delectus assumenda, saepe fugiat? Neque necessitatibus iure iusto fugiat corporis, officiis possimus tenetur? Facere minus beatae id. Voluptas,
      iure dignissimos reprehenderit similique dolore tenetur odit inventore dolor enim, consectetur expedita quaerat dolores quam recusandae. Corrupti magni atque voluptatibus aspernatur itaque ducimus officia fugiat qui perferendis minima odio quam
      cumque iusto minus doloribus ipsam explicabo, modi ratione. Libero, facere aperiam possimus asperiores reiciendis odio quas. Aspernatur, error accusantium! Delectus, dolore a reprehenderit, quidem, quas repellendus cum alias consequuntur voluptatibus
      aspernatur praesentium vitae porro eos sunt dolor numquam minima. Provident inventore architecto tempore incidunt, quas amet. Esse dolor corporis nisi earum perspiciatis exercitationem illum eveniet accusantium nulla qui hic doloremque est reiciendis
      autem nobis, aperiam repudiandae incidunt consectetur. Officiis, suscipit atque quisquam tenetur esse distinctio tempore. Vel possimus repellat minima asperiores nesciunt dignissimos dolores cupiditate officiis porro, nihil tenetur fugit accusamus,
      fugiat delectus ab, deserunt vero debitis hic nam veritatis laboriosam ipsa illum odio. Impedit, non! Repellendus accusantium quasi veritatis nam. Excepturi, numquam. Soluta omnis est officia vitae eligendi. Maiores, nemo praesentium. Debitis nostrum
      nam beatae commodi nobis ex nemo iure ipsum, alias pariatur placeat quod! Laudantium ipsam voluptate expedita nam dolorem ad ducimus aut minima similique quis dolores nemo blanditiis placeat, incidunt facilis illo nulla, distinctio ex. Delectus
      voluptates, impedit quam voluptate aliquam aperiam. Nihil. Autem, ipsa provident quasi fuga veniam impedit illo vitae eligendi recusandae neque soluta, maxime, voluptatem laudantium voluptatibus officiis incidunt vero perspiciatis quidem. Repellat
      reprehenderit repudiandae laudantium minima recusandae, porro necessitatibus? Impedit sequi voluptatem iusto! Quos laudantium architecto consequatur ducimus aperiam assumenda facilis facere praesentium impedit quae beatae dolorem aut sequi fuga
      asperiores explicabo quas, amet magnam minus? Deleniti, molestiae reprehenderit. Voluptates id illum qui exercitationem voluptas incidunt quae autem aspernatur doloremque! Fugiat veniam eos assumenda quos, dolore quibusdam non quis autem incidunt
      facere ipsam repudiandae atque animi labore? Debitis, ea! Maxime nemo, nulla sit explicabo laudantium minima quia? Minima quaerat, fugiat id esse aspernatur, placeat quos eos et impedit quae ducimus! Nesciunt corporis provident, dolores accusantium
      minima quod unde fugit. Assumenda, voluptas nam necessitatibus consequatur, sint ea ut quis asperiores porro tempore eum impedit omnis perferendis similique incidunt maxime laboriosam dolorum odio aliquam voluptatibus ab nesciunt nihil? Autem, officia
      nihil? Quam iure consequuntur repellat temporibus sapiente optio exercitationem, incidunt id vero ullam eos voluptatem veniam, blanditiis harum, ad nostrum a placeat rerum aliquid asperiores saepe! Eveniet neque saepe magni dolor. A, facilis repellendus.
      Blanditiis, facilis. Cum necessitatibus repellat autem mollitia assumenda voluptate minus delectus aspernatur! Soluta suscipit quasi architecto vel cum unde esse rerum, animi veniam quos atque ipsa temporibus. Excepturi dolores natus distinctio
      qui a debitis unde, nihil, consequuntur aliquam veritatis doloribus eius nostrum et sint quisquam laborum facere at iste quas fuga, possimus illo dignissimos maxime sapiente? Optio. Fuga aut nam in culpa dolor dignissimos, ratione quisquam ullam
      eligendi velit aspernatur, quasi laboriosam, laborum totam adipisci. Est, aliquam! Repellendus voluptate perferendis cum impedit assumenda ex doloremque obcaecati temporibus? Rerum, nostrum consectetur facilis iusto in dolor cumque qui! Facere accusamus
      animi pariatur suscipit optio repellat ipsa labore, veritatis repudiandae aliquid aut itaque quos, autem rem odio vel officiis voluptate? Quas, nulla consequatur asperiores soluta libero minima praesentium sed adipisci magnam suscipit. Facilis quas
      hic error laboriosam totam, dicta facere consequatur commodi dolorum numquam? Praesentium vel facilis eligendi laudantium accusamus! Suscipit natus ducimus aspernatur, labore id autem quasi sed obcaecati et! Corporis, nihil perferendis eveniet ducimus
      odit a consectetur alias, similique nisi tenetur exercitationem, voluptas quisquam aliquid consequuntur totam pariatur? Quasi iste expedita ad? Magnam repellat quisquam animi quae. Explicabo illum id, quis dolores est rem dicta placeat optio ducimus
      sed, et voluptas? Sequi reiciendis omnis quis at harum repudiandae! Perspiciatis magni id minima soluta culpa ut numquam tempore natus rerum distinctio, atque consequatur rem, placeat officiis quam ad, ducimus tenetur adipisci vero quod! Facilis
      dicta odio voluptatum consequatur laudantium. Ipsam cumque dolore dicta illum voluptate assumenda in reprehenderit maxime eaque, deleniti dolorem minus itaque ex officiis earum ad libero excepturi! Quae, ex nemo sint obcaecati placeat corporis?
      Molestiae, vel. Beatae nobis quos dolorum animi iure incidunt ipsa corrupti. Placeat voluptates ab rem blanditiis provident tempora veniam dicta tenetur dolor voluptate officiis quia reiciendis, et ut quas impedit? Nisi, dolor! Veniam nihil ipsam
      blanditiis laboriosam, itaque, placeat exercitationem temporibus tenetur eligendi unde reiciendis laudantium quis, optio quod. Vitae, cupiditate cum praesentium explicabo tempora soluta nemo est provident, labore neque saepe? Rem neque veniam molestiae
      maiores enim eos dicta minus consequuntur dolores atque molestias blanditiis commodi voluptas reprehenderit, voluptate aperiam perspiciatis nesciunt quasi unde ab magni nulla! Et, obcaecati? Expedita, aliquam? Dolor quaerat cumque veritatis ipsa
      eum dicta doloremque eveniet aut vel minus, quis eius ex id tempora, saepe alias, numquam aperiam omnis quibusdam consequatur hic? Corporis quidem delectus est ad? Temporibus omnis, autem, consequuntur dolorem eligendi perferendis doloremque neque
      mollitia molestias possimus dignissimos molestiae veniam facere? Molestiae quisquam eaque voluptates itaque cum voluptatibus eveniet iste, fugit, quam dolores totam neque. Quia harum dolores beatae quod vitae repellat sit. Perspiciatis blanditiis
      autem animi corporis minus ducimus reiciendis explicabo obcaecati consectetur molestiae vero dolore, doloribus iure cumque maxime esse? Aut, repudiandae nemo! Expedita hic a saepe facilis eos illo unde esse? Minus labore laboriosam natus, illum
      dolorem nihil et porro pariatur nam aperiam dolore! Dignissimos nobis accusamus debitis dolor quisquam, id asperiores? Facilis eius dolorum quasi cupiditate nostrum mollitia illo, vero culpa rem facere earum fuga doloribus officiis tenetur voluptates
      perferendis sed temporibus sunt rerum molestias iure totam. Eaque doloribus quia reiciendis! Sint aliquid, ratione eaque iusto architecto sunt cum laudantium quaerat officiis commodi porro. Quaerat magnam ex nihil maxime hic corporis architecto
      dignissimos, totam cum, veniam, officiis tenetur quae velit saepe.
    </p>
  </section>
</div>