Header fixo depois do scroll
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?
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
Curtidas 0