0

假设我有一个似乎固定在屏幕底部的页脚,但是当用户向下滚动时,我希望在该页脚下显示内容。滚动后页脚显示更像是屏幕宽的页眉而不是页脚。我怎样才能做到这一点?我是新手,所以我有点沮丧。

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

这是我用于页脚的:

<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%;
}
4

1 回答 1

1

JSFiddle

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

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

于 2013-07-10T13:37:37.947 回答