Header fixo depois do scroll

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

Curtir t�pico + 0

Responder