Header fixo depois do scroll

jQuery

23/06/2017

Estou com uma dificuldade de fixar o header depois do scroll.

O meu código, eu consigo fazer o scroll receber o position: fixed e aplico um padding no container para ele não andar para cima depois de fixar. Quando eu dou o scroll, eu aplico uma classe CSS para fazer uma animação do Header descendo e ficando fixo no topo, mas quando volto para cima, não consigo refazer a animação inversa, porque ele retira a classe.

Deve ter um modo de fazer isso mais simples, mas eu não sei como.

Além disso, eu tenho um problema, se eu recarregar a página no meio dela, o header ta lá em cima ainda, eu tenho que dar um scroll para ele aparecer.

Alguém consegue me ajudar?

$(window).scroll(function(){
		var fixed = $('header'),
		scroll = $(window).scrollTop();
		var width = $(window).width();
		if (width < 768){
			if (scroll >= 100){
				fixed.addClass('fixed-header');
				$('.container').css('padding-top', '60px');
			} else {
				fixed.removeClass('fixed-header');
				$('.container').css('padding-top', '0px');
			}
		} else {
			if (scroll >= 150){
				fixed.addClass('fixed-header');
				$('.container').css('padding-top', '75px');
			} else {
				fixed.removeClass('fixed-header');
				$('.container').css('padding-top', '0px');
			}
		}
	});
Dayan Barros

Dayan Barros

Curtidas 0
POSTAR