假设我有一个似乎固定在屏幕底部的页脚,但当用户向下滚动时,我希望在该页脚下显示内容。滚动后,页脚显示更像是屏幕宽的页眉而不是页脚。我怎样才能做到这一点?我对此很陌生,所以我有点沮丧。
我希望它像一个固定的页脚一样开始,但随着用户向下滚动,我希望页脚然后分离而不是固定的,但更像一个页眉。当用户返回时,它显示返回到固定状态。
这是我用于页脚的内容:
<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%;
}
JSFiddle
$(document).scroll(function() {
if($(document).scrollTop() > 220) {
$('footer').css({
'position': 'static'
});
} else {
$('footer').css({
'position': 'fixed'
});
}
});
只需将 220 修改为适合您网站的值即可。
我是一名优秀的程序员,十分优秀!