Como fixar um 'menu horizontal' no topo da janela ao rolar a página?

Para fixar um menu horizontal no topo da janela ao rolar a página, você pode usar CSS position: fixed juntamente com JavaScript.

Aqui está um exemplo de como fazer isso:

HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .top-menu {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #f1f1f1;
      padding: 10px;
      z-index: 999;
    }
    .content {
      margin-top: 50px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="top-menu">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>

  <div class="content">
    <h1>Conteúdo da página</h1>
    <p>Desça a página para ver o menu fixo no topo.</p>
  </div>

  <script>
    window.onscroll = function() { myFunction() };

    var menu = document.querySelector('.top-menu');
    var sticky = menu.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        menu.classList.add('sticky')
      } else {
        menu.classList.remove('sticky');
      }
    }
  </script>
</body>
</html>

No exemplo acima, o menu superior possui a classe “top-menu”. A propriedade CSS “position: fixed” é usada para fixar o menu no topo da janela. A classe “sticky” é adicionada ou removida usando JavaScript, dependendo da posição de rolagem da página.

Note que o exemplo usa uma estrutura básica de HTML e CSS para mostrar o menu fixado no topo. Você pode personalizar o estilo e o conteúdo do menu de acordo com suas necessidades.

Espero que isso ajude!