Jun
15
2013
随滚动条滑动而滑动的DIV层(固定在网页顶部不随浏览滚动而消失的DIV层)
作者:
绝缘体.. 发布:
2013-06-15 11:41 分类:
未分类 阅读:
抢沙发
最近浏览网页时看到一个比较不错的做法,就是网页的某一块在随浏览器滚动快要消失的时候会浮动在页面上,页面还可以继续往上翻滚,但比较突出的那一块一直贴在浏览器的顶部,比如拖拉网,美丽说的顶部导航条就是这种效果,自我感觉这种效果还是比较贴心的,于是乎自己钻研了下,也写了这样一种效果,现在将代码贴在下面和大家分享。
/*
*滚动条滑动,位置不变的DIV层
*div_id:DIV的ID属性值,必填参数
*offsetTop:滚动条滑动时DIV层距顶部的高度,可选参数
*/
function fixDiv(div_id,offsetTop){
var Obj=$('#'+div_id);
if(Obj.length!=1){return false;}
var offsetTop=arguments[1]?arguments[1]:0;
var ObjTop=Obj.offset().top;
var isIE6=$.browser.msie && $.browser.version == '6.0';
if(isIE6){
$(window).scroll(function(){
if($(window).scrollTop()<=ObjTop){
Obj.css({
'position':'relative',
'top':0
});
}else{
Obj.css({
'position':'absolute',
'top':$(window).scrollTop()+offsetTop+'px',
'z-index':1
});
}
});
}else{
$(window).scroll(function(){
if($(window).scrollTop()<=ObjTop){
Obj.css({
'position':'relative',
'top':0
});
}else{
Obj.css({
'position':'fixed',
'top':0+offsetTop+'px',
'z-index':1
});
}
});
}
}
请注意使用这个方法之前请先加载 jquery 库文件,具体使用方法如下(比如下面要将页面id属性为test的div达到随滚动条滑动而滑动的效果):
fixDiv('test',5);//顶端浮动并于顶端保持5px的间距
微信扫一扫,打赏作者吧~