弹出粘滞页脚

Question

我想创建一个粘性页脚，当用户将页面滚动到底部时弹出，但我希望页脚留在内容后面。

对于弹出式部分我使用css：

#footer {
    position: fixed;    
    height: 200px;
    width: 100%;
    bottom: 0;
    left: 0px;
    display: none;
}

和jquery：

$(window).scroll(function() {
    if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {          
        $('#footer').show();
    }
});

我的问题是当页脚弹出，内容保持在页脚后面时，我尝试z-index：-1作为页脚，但内容与页脚重叠。我怎样才能做到这一点：

**第一步：用户向下滚动 **当达到底部，页脚弹出，内容是俯卧撑 **当用户向上滚动时，页脚会留在内容

之后