今天做了个固定定位的效果。比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示。当滚动到导航下面,导航就固定到顶部。
一、css部分:
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
二、这个效果使用了jquery的方法实现,具体思路为:
1、首先获得已经滚动上去的高度
2、让导航条固定定位 如果t>139加f这个Class,让它有定位
3、如果小于或等于139,取消f这个Classhtml>
*{
padding:0;
margin:0;
}
img{
display:block;
margin:0auto;
}
img#menu.f{
position:fixed;
left:50%;
margin-left:-602px;
top:0;
}
$(function(){
//给浏览器加滚动条事件
$(window).scroll(function(){
//获得已经滚动上去的高度document页面文档区域window也可以
vart=$(document).scrollTop();
document.title=t;
if(t>139){
//让导航条固定定位fixed:固定的向左留50%(一半的距离有居右的效果),然后这个图片是1204px宽度,图片在右,向左是负的()图片一半602px,达到居中效果
//$('#menu').css({'position':'fixed','top':'0','left':'50%','margin-left':'-602px'})
//让导航条固定定位如果t>139加f这个Class,让它有定位
$('#menu').addClass('f');
}else{
//如果小于或等于139,取消f这个Class
$('#menu').removeClass('f');
}
})
})