Tenho o seguinte cenário.
- Um banner no topo que pega todo o viewport da tela, independente da resolução
- Abaixo dele um menu que ao rolar o scroll para baixo ele fique no topo acompanhando o scroll e ao subir ele pare abaixo do banner, sua posição inicial.
Eu fiz um script mas teria que prever todas as resoluções e acho isso inviável, veja abaixo:
var $w = $(window);
var $larg = $(window).width();
if($larg >= 1280){
$w.on("scroll", function(){
if( $w.scrollTop() > 960 ) {
$(".topo-fixo").css("position", "fixed");
}else{
$(".topo-fixo").css("position", "static");
}
});
}else if($larg > 1024 || $larg < 1279){
$w.on("scroll", function(){
if( $w.scrollTop() > 720 ) {
$(".topo-fixo").css("position", "fixed");
}else{
$(".topo-fixo").css("position", "static");
}
});
}if($larg < 1024){
$(".topo-fixo").css("position", "fixed");
}
Onde $w
é a altura do viewport e $larg
a resolução da tela na largura.
Como eu poderia fazer esse script de forma que ele pegasse a altura depois do banner independente da sua resolução, desktop ou mobile?
Lembrando que o banner se adequa a qualquer resolução, então sua altura varia
Desde já obrigado!