fadeOut div#wrapper_footer_fixed when div#footerstart On Screen

Question

I'm trying to set up a sticky footer on my page with a condition to show it or hide it. The HTML is as 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 I have for #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 is the marker for where #wrapper_footer starts.

How I need this to work is:

1. #wrapper_footer_fixed is loaded on the screen by default
2. when #footerstart (or #wrapper_footer) is viewable on the page, #wrapper_footer_fixed is not visible (fadeOut).
3. If the viewport is viewing #footerstart (or #wrapper_footer) and the user scrolls up (so that #footerstart is no longer on the screen), #wrapper_footer_fixed immediately is shown (fadeIn) in the screen.
4. If the page's height is short enough that there is no vertical scroll, then #wrapper_footer_fixed does not show, but does show (fadeIn) if content is added dynamically to the page without reload, showing a vertical scrollbar.

My failed attempt is below (I have very 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();
    }
  });

Answer 1

You have to count if the #footerstart is visible. "Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero." - http://api.jquery.com/visible-selector/

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

    }
});