title: Hide if over other elements
body: <p>I have a div with fixed position inside another div that spans down past the page fold. Now, there are other elements withing that parent div as well, mostly at the top of the page. I would like to hide the child with fixed position if it happens to be over another element within this parent, for example if a user resizes the window. How can I do that with jQuery?</p>
  
  <p>Here's what I've got so far:</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function(){
      function floatingDiv(){
          var m = $('#parentDiv'), offset = m.offset(), posL = Math.floor(offset.left - 15);
          $('#divFloat').remove();
          m.append(\"&lt;div id='divFloat' style='position:fixed;left:\"+ posL +\"px; bottom:55px; border:0'&gt;&lt;a href='/' style='width:168px;height:43px; background: url(/i/free3day.png) no-repeat center center;position:fixed; border:0; left:\"+ posL +\"px;bottom:55px'&gt;&lt;/a&gt;&lt;/div&gt;\");
      }
  
      floatingDiv();
  
      $(window).resize(function(){
          floatingDiv();
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="parentDiv"&gt;
      &lt;a href="#"&gt;SOME LINK&lt;/a&gt;
      &lt;div&gt;some content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>