hide and show fixed div based on scroll position o

Question

I am try to hide or show a fixed div (.featBar) .

(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 )

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)

Here's the code I have now:

<script type="text/javascript">

 var  windowScroll = $(window).scrollTop(),
      slideHeight = $('.rslides1_on').height(),
      windowHeight = $(window).height(),
      diffHeight = slideHeight - windowHeight;

 $(window).scroll(function() { 
   if ( windowScroll > diffHeight ) {
     $('.featBar').show();
   } else { $('.featBar').hide(); };




});
</script>

Here is a link to what I'm working on:

http://thisisaust.myshopify.com/ pass: austaust

I also would like the function to trigger whenever/as the browser is re-sized.

Answer 1

You will have to read the scrollTop inside the scroll-function, because it updates every time you scroll up or down. Your code should look like this:

<script type="text/javascript">

 var  slideHeight = $('.rslides1_on').height(),
      windowHeight = $(window).height(),
      diffHeight = slideHeight - windowHeight;

 $(window).scroll(function() {
   var windowScroll = $(window).scrollTop();
   if ( windowScroll > diffHeight ) {
     $('.featBar').show();
   } else { $('.featBar').hide(); };

});
</script>

I think this should work.