jquery - fadeOut div#wrapper_footer_fixed when div#footerstart On Screen -

jquery - fadeOut div#wrapper_footer_fixed when div#footerstart On Screen -

i'm trying set sticky footer on page status show or hide it. html follows:

<div id="wrapper_footer_fixed"> <?php echo $this->getchildhtml('footer') ?> <div class="clear"></div> </div> <div id="footerstart"></div> <div id="wrapper_footer"> <?php echo $this->getchildhtml('footer') ?> <div class="clear"></div> </div>

the css have #wrapper_footer_fixed is:

#wrapper_footer_fixed { position: fixed; bottom: 0; left: 0; z-index: 99999; display: block; width: 100%; height: 40px; border-top: 1px solid #e5e5e5; background: #292929 url("../images/bkg_site_rock_pattern.png"); }

#footerstart marker #wrapper_footer starts.

how need work is:

#wrapper_footer_fixed loaded on screen default when #footerstart (or #wrapper_footer) viewable on page, #wrapper_footer_fixed not visible (fadeout). if viewport viewing #footerstart (or #wrapper_footer) , user scrolls (so #footerstart no longer on screen), #wrapper_footer_fixed shown (fadein) in screen. if page's height short plenty there no vertical scroll, #wrapper_footer_fixed not show, show (fadein) if content added dynamically page without reload, showing vertical scrollbar.

my failed effort below (i have limited knowledge of jquery):

jquery(document).ready(function(){ if(jquery('#footerstart').is(':visible')){ jquery('#wrapper_footer_fixed').fadeout(); } else if(jquery('#footerstart').not(':visible')) { jquery('#wrapper_footer_fixed').fadein(); } });

you have count if #footerstart visible. "elements considered visible if consume space in document. visible elements have width or height greater zero." - http://api.jquery.com/visible-selector/

$(function() { if($(window).height() + $(window).scrolltop() > $('#footerstart').offset().top) { // $('#footerstart') visible } else { } });

jquery anchor fadein fadeout sticky-footer