Jquery 滚动时可以重新定位的页脚

假设我有一个固定在屏幕底部的页脚，但当用户向下滚动时，我希望在该页脚下显示conetnt。滚动后，页脚显示更像是屏幕宽度的页眉，而不是页脚。我该怎么做？我是新手，所以我有点沮丧

---

我希望它像一个固定的页脚开始，但随着用户向下滚动，我希望页脚，然后分离，而不是固定，但更像一个标题。当用户返回时，它显示返回到被修复状态

这是我用于页脚的内容：

<div class="footer" id="footer">My Footer</div>

#footer
{
    clear: both;
    border: 1px groove #aaaaaa;
    background: blue;
    color: White;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

我的页脚
#页脚
{
明确：两者皆有；
边框：1px槽#AAAAA；
背景：蓝色；
颜色：白色；
填充：0；
文本对齐：居中；
垂直对齐：中间对齐；
线高：正常；
保证金：0；
位置：固定；
底部：0px；
宽度：100%；
}

---

只需将220修改为适合您网站的值。

问题不清楚。它怎么能保持在底部并在其后面有内容？我希望它像一个固定的页脚开始，但随着用户向下滚动，我希望页脚然后分离，而不是固定的，但更像一个标题。当用户返回时，它显示返回到被修复状态。它不是一个页脚，但听起来很酷。相比之下：当内容在页脚内移动时，页脚不应再被修复。谢谢

$(document).scroll(function() {     
if($(document).scrollTop() > 220) {   
    $('footer').css({
        'position': 'static' 
    });
  } else {
    $('footer').css({
        'position': 'fixed' 
    });
  }
});