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!