title: hide and show fixed div based on scroll position of another element
body: <p>I am try to hide or show a fixed div (.featBar) . </p>
  
  <p>(there is another div in the document .featbarinline that is exactly the same as .featbar except for its positioning, that i want to seemless overtake the fixed the .featBar ) </p>
  
  <p>You can take a look at the site www.documentjournal.com to see what I'm going for. ( Look for how the white bar fixed to the bottom behaves) </p>
  
  <p>Here's the code I have now:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
   var  windowScroll = $(window).scrollTop(),
        slideHeight = $('.rslides1_on').height(),
        windowHeight = $(window).height(),
        diffHeight = slideHeight - windowHeight;
  
   $(window).scroll(function() { 
     if ( windowScroll &gt; diffHeight ) {
       $('.featBar').show();
     } else { $('.featBar').hide(); };
  
  
  
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a link to what I'm working on:</p>
  
  <p><a href="http://thisisaust.myshopify.com/" rel="nofollow">http://thisisaust.myshopify.com/</a>
  pass: austaust</p>
  
  <p>I also would like the function to trigger whenever/as the browser is re-sized. </p>