Прикрепить меню навигации кверху при скролле

Есть такая страница.

Верстка секции с меню навигации:

<section class="hero">
      <h1 class="hero__text">Ответы на часто задаваемые вопросы</h1>
      <div class="nav">
      <nav class="hero__nav" role="navigation">
        <ul class="hero__ul">
          <li><a href="#popular" class="hero__link">Популярное</a></li>
          <li><a href="#donate" class="hero__link large">Управление пожертвованием</a></li>
          <li><a href="#donate" class="hero__link small">Пожертвования</a></li>
          <li><a href="#charity" class="hero__link gradient">О&nbsp;благотворительности</a></li>
          <li><a href="#about" class="hero__link">О&nbsp;фонде</a></li>
        </ul>
        <form action="" class="hero__form">
          <input class="hero__search" type="search" placeholder="Поиск по&nbsp;вопросам и&nbsp;ответам">
          <button class="hero__button" type="reset"></button>
        </form>
      </nav>
      </div>
    </section>

Нужно чтобы при скроле вниз он крепился кверху страницы.

Как сделать так на чистом JS?