Menu fixed after scroll

Question

Good morning!

How can I make the smooth effect of setting the menu by scrolling the page like this: https://overwatchleague.com/pt-br/

Answer 1

Split...
In HTML you need to add the element that will be the navigation.

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

Almost all the magic is in the styles, which should be something like this:

 /* 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;
} 

And finally the 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");
  }
}