title: show/hide DIV when passed the other div
body: <p>I want a <code>hidden</code> <code>div</code> show if he passed the another DIV. for example show in <code>html</code> below if <code>div.passedMe</code> bottom! meet the top of the window, the <code>div.showHide</code> will show and when <code>scroll up</code> and the <code>div.passedMe</code> top! meet the top of the window the <code>div.showHide</code> will hide.</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div class="passedMe"&gt;If you passed this div another div will show/hide&lt;/div&gt;
  
  &lt;div class="showHide"&gt; this div will show/hide&lt;/div&gt;
  </code></pre>
  
  <p>so far this is what I have but this only work when passed a  certain <code>PIXEL</code> on A page</p>
  
  <pre><code>$(document).scroll(function () {
      var y = $(this).scrollTop();
      if (y &gt; 100) {
          $('.showHide').fadeIn();
      } else {
          $('.showHide').fadeOut();
      }
  
  });
  </code></pre>
  
  <p>this is the <a href="http://jsfiddle.net/ZyKar/1426/" rel="nofollow">fiddle</a></p>