固定元素在页脚处消失

Question

我试图让一个固定的可滚动元素不会溢出到页脚菜单中。我得到了它的工作，但当它向下滚动到页脚时，固定元素消失然后当我向上滚动时重新出现。这是我的代码：

// fix the orange box to the top after scrolling a certain amount
$(window).scroll(function() {
// get the scroll position top
    var window_pos = $(window).scrollTop();

    // fix the element on scroll
    if (window_pos >= $('#sticky').offset().top) {
        $('#suggestions').css({
            'position': 'fixed',
             'top': '0px',
        });
    }

    // prevent overlapping on footer element
    if (window_pos + $('#suggestions').height() >= $('.footer').offset().top - 20) {
        $('#suggestions').css({
            'position': 'static',
            'top': 'auto',
        });
    } else {
        // restore fixed position
        if (window_pos + $('#suggestions').height() < $('.footer').offset().top - 20) {
            $('#suggestions').css({
                'position': 'fixed',
                'top': '0px'
            });
        }
    }

    if (window_pos < $('#sticky').offset().top - 20) {
        // prevent overlapping on top element
        $('#suggestions').css({
            'position': 'static',
            'top': 'auto'
        });
    } 
});

这是我的css和html：

.footer {
    border-color: #CC6600;
    margin: 0px;
    background-color: #E4E4CF;
    text-align: center;
    color: #005596;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding-top: 10px;
    width: 100%;
    min-width: 800px;
    border-top-style: solid;
    border-top-width: 3px;
    height: 110px; 
    clear: both;
    margin-top: 10px;
}

.suggestionsBox-stock  {
    width: 215px;
    background-color: #F1D4B8;
    border: 0;
    padding: 5px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 5px;
}

    <div id="sticky" style="visibility: hidden;"></div>

    <div class="suggestionsBox-stock" id="suggestions" style="display: none; font-size: 10px;">             
    <div class="suggestionList" id="autoSuggestionsList"></div>
    <div class="clearFloat"></div>
    <!-- ajax loaded content -->
    <div class="footer">
    <ul>
        <li>|</li>
        <li>|</li>
        <li>|</li>
        <li><a href="#"></a></li>
    </ul>
    <p></p>
    <p></p>
    <ul>
        <li><a href="#"></a>&nbsp;|</li>
        <li><a href="#"></a></li>
    </ul>
</div>
</div>

任何帮助将不胜感激。

谢谢！