5

Estou a usar um template com o layout Responsive. Tenho um banner na lateral direita de um site. O que estou a fazer, é que ao fazer scroll da página o banner acompanha a página. Quando diminuo a janela, o banner vai para cima do conteudo. O que queria fazer, era o banner desaparecer quando a janela fosse diminuída. O código em baixo é o que faz o banner acompanhar a página. Como faço desaparecer o banner caso a janela seja mais pequena?

<style>
    #getFixed { padding: 100px 0px 0 0px; margin: 10px; z-index: 50000; }
</style>

<script>
     function fixDiv() {
     var $cache = $('#getFixed'); 
     if ($(window).scrollTop() > 350) 
     $cache.css({'position': 'fixed', 'top': '10px'}); 
     else
     $cache.css({'position': 'relative', 'top': 'auto'});
     }
     $(window).scroll(fixDiv);
     fixDiv();
</script>

<div id="getFixed"><img src="banner.png" width="220"></div>

2 Respostas 2

5

Você pode usar o @media

@media screen and (max-width: 600px) {
    #getFixed {
        display: none;
    }
}

Fiddle

1
  • Era isso mesmo que procurava. Obrigado!
    – pc_oc
    Commented 6/03/2014 às 10:58
2

Baseando-se no exemplo do @Beterraba, podemos fazer com o jQuery da seguinte forma:

$(window).resize(function(){

   if ($(this).height() < 600) {
       $('#getFixed').hide();
   }  else {
      // ação caso não seja menor que 600px
   }

});

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 .