-1

Bom dia!

Como posso fazer o efeito suave de fixação do menu ao rolar a página como nessa: https://overwatchleague.com/pt-br/

1

1 Resposta 1

0

Bem por partes...
No HTML precisas adicionar o elemento que será a navegação.

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

Quase toda a magia está nos estilos, que deverão ser algo assim:

 /* Estilos do header */
.header {
  padding: 10px 16px;
}

/* Conteúdo */
.content {
  padding: 16px;
}

/* Esta classe é adicionada em JS quando o header chega à posição de scroll */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Hack para prevenir movimentos bruscos nos elementos da página quando o header fica fixo */
.sticky + .content {
  padding-top: 102px;
} 

E finalmente o JS:

// Quando user fizer scroll executar a myFuntion
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");

var sticky = header.offsetTop;

// Adicionar a classe sticky ao header quando chega à posição de scroll e remover quando sai dessa posição.
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
} 

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .