Como fazer menu fixo apartir de certa rolagem da página

Dois caras perguntaram isso no fórum essa semana, e eu mesmo precisei fazer em um trabalho meu.

Então lá vai.

O evento é o window.onscroll, pois até que o position: sticky; saia do rascunho da w3c, não temos nada “de graça” e pronto para fazer isso.

Então escutamos no evento onscroll, a posição atual da página, e ai, se chegar a ser maior que tal valor, podemos aplicar oque precisamos.

Em javascript puro

Bem simples:

window.onscroll = function(){
   var top = window.pageYOffset || document.documentElement.scrollTop
   if( top > 300 ) {
       console.log('Maior que 300');
   }
}

Em jQuery

Apenas caso vc já esteja com a lib incorporada, pois não vale nenhum pouco a pena coloca-la apenas por causa disso:

var $w = $(window);

$w.on("scroll", function(){
   if( $w.scrollTop() > 300 ) {
       console.log('Maior que 300');
   }
});

É isso! comentem caso usem!