Remove banner depending on window size

Navigation
5

I'm using a template with the Responsive layout. I have a banner on the right side of a website. What I'm doing is that by scrolling the page the banner accompanies the page. When I lower the window, the banner goes over the content. What he wanted to do, was the banner disappear when the window was dimmed. The code below is what makes the banner follow the page. How do I disappear the banner if the window is smaller? 

<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>
    
asked by anonymous 06.03.2014 / 10:52

2 answers

5

You can use @media 

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

Fiddle

    
06.03.2014 / 11:54
2

Based on the example of @Berraba, we can do with jQuery as follows: 

$(window).resize(function(){

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

});
    
19.02.2015 / 12:08
How the android attribute works: ems (TextView) Subtraction of multiple selects