title: Make sticky div function responsive
body: <p>I am trying to figure out how to turn off the sticky ability for my div when my site begins to scale to a specific size (767px). I tried changing the the position from absolute to relative in a media query. But when I tried to scroll past the div the whole screen scrolls back up to the div instead of allowing me to scroll down.</p>
  
  <p>How can I remove the sticky effect when I scale to 767px and enable it when I scale to 768 and above?</p>
  
  <pre><code>$(function() {
  
      var $sidebar   = $("#postRecipe"), 
          $window    = $(window),
          offset     = $sidebar.offset(),
          topPadding = 15;
  
      $window.scroll(function() {
          if ($window.scrollTop() &gt; offset.top) {
              $sidebar.stop().animate({
                  marginTop: $window.scrollTop() - offset.top + topPadding
              });
          } else {
              $sidebar.stop().animate({
                  marginTop: 0
              });
          }
      });    
   });
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code> #postRecipe {
       position:absolute; 
       float:left;
       width:30%;  
   }
  
   #content {
       float:right;
       width:50%; 
   }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/y8KGG/4/" rel="nofollow">http://jsfiddle.net/y8KGG/4/</a></p>