0

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!

1 Resposta 1

0
var w = document.getElementById('banner').innerWidth
var h = document.getElementById('banner').innerHeight

ou

var w = $('.banner').innerWidth
var h = $('.banner').innerHeight

ou

var w = document.getElementById('banner').offsetWidth
var h = document.getElementById('banner').offsetHeight

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .