Remove banner depending on window size

Question

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 scrolling the page and the banner goes with the page. When I scroll down, the banner goes over the content. What I wanted to do was to make the banner disappear when the window was lowered. The code below is what makes the banner follow the page. How do I make the banner disappear 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>

Answer 1

You can use the @media

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

Fiddle

Answer 2

Based on the @Beet example, we can do jQuery as follows:

$(window).resize(function(){

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

});