<nav class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item"><a class="navigation__link" href="#one">Item 1</a></li>
    <li class="navigation__item"><a class="navigation__link" href="#two">Item 2</a></li>
    <li class="navigation__item"><a class="navigation__link" href="#three">Item 3</a></li>
  </ul>
</nav>
<main class="content">
  <section class="content__section" id="one">
    <h2>one</h2>
    <p>Ipsam non ut voluptatem expedita nisi in voluptas sunt. Iste et cupiditate nesciunt dolor tempora. Ipsa velit officiis minima soluta repellat quia accusantium. Sed consequatur nihil sed ex doloribus cumque. Qui aliquam sint voluptatem.</p>
  </section>
  <section class="content__section" id="two">
    <h2>two</h2>
    <p>Porro incidunt omnis id magni fugiat dolor voluptatibus. Unde accusamus quia nihil est consequuntur impedit sit. Vitae accusantium excepturi eum aperiam. Nihil quis eum numquam. Voluptatem veniam reiciendis assumenda ut aut.</p>
  </section>
  <section class="content__section" id="three">
    <h2>three</h2>
    <p>Perferendis voluptate sequi sit beatae iusto aliquid nulla. Et sed blanditiis illum repellat ut dicta. Eos quo facere maiores. Molestiae aut nesciunt blanditiis est eveniet est qui qui. Ea unde nam aliquid dolore asperiores ut deserunt in.</p>
  </section>
  <section class="content__section" data-default="true">
    <h1>Hi</h1>
    <p>Please select an item.</p>
  </section>
</main>

:root {
  scroll-behavior: smooth;
}

.navigation {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 16px;
  background: rgba(indigo, .95);
  box-shadow: 0 0 5px 0 rgba(black, .5);
  z-index: 2;
  
  &__list {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 16px;
    list-style: none;
  }
  
  &__link {
    height: 2em;
    margin: 0 24px;
    padding: 8px;
    font-size: 2em;
    color: white;
    text-decoration: none;
  }
}

.content {
  position: relative;
  max-width: 80ch;
  margin: auto;
  
  &__section {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-5%);
    transition: opacity 0.3s ease-out 0s, transform 0.3s ease-out 0s;
    
    &[data-default="true"] {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
    }
    
    &:target {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
      transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s;
      
      & ~ [data-default="true"] {
        pointer-events: none;
        opacity: 0;
        transform: translateX(-5%);
      }
    }
  }
  
  &__entry {
    width: 100%;
  }
}