您的位置：首页 > 其它

简单网页效果--固定div位置

2012-12-14 11:26 225 查看

注册了个博客，发了两篇博文后不知道发啥了，最近看其他网友发了篇关于固定div位置的博文，我也来show一下我的作法，代码在下面，没有做过多的封装，仅仅提供思路，供参考，欢迎大家喷水~~

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<title>Js跟随滚动条移动的DIV</title>
</head>
<style type="text/css">
*{margin:0;padding: 0;background-color:#000; }
div#con{width: 800px;margin: 0 auto;}
div.pop{width:800px;font-size: 18px;background:yellow;padding:20px 0;margin:20px auto;border:1px solid yellow;text-align: center;color: #000;}
p{width:800px;padding:20px 0;background:#fff;border:1px solid #000;margin:20px auto;text-align: center;}
div.active{position: fixed;top: 100px;z-index: 100;margin: 0;_position: absolute;}
</style>
<body>
<div id="con" style="height:2000px;">
<p>我是元素p</p>
<div id="myDiv" class="pop active">
我是随屏幕滚动的DIV，我距离顶部高度适中为100px，修改css就可以修改该值
</div>

<p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p style="color:red;position:fixed;top:400px;">我是元素top:400px;看是否支持固定定位</p>
</div>
<script type="text/javascript">
(function(){
//if(navigator.userAgent.toLocaleLowerCase().indexOf('msie 6.0;')>1){
if(checkFixed()){
return ;
}//只需对不支持固定定位的浏览器做处理

//将下面需要使用的dom相关操作在scrollDiv外面提取一次，避免多次dom操作
var fixedObj = document.getElementById("myDiv"),
height = fixedObj.offsetHeight,//标签高度提前读取出来
firstTop =getTop(fixedObj),//记录页面一开始标签所在位置
timer;
window.onscroll = function(){//这里做个延时执行，可以减少scroll执行频率
clearTimeout(timer);
timer = setTimeout(function(){
scrollDiv()
},30);
}

function scrollDiv(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
fixedObj.style.top=(firstTop+scrollTop)+'px';
}
//获取元素在页面里top值
function getTop(obj) {
var top = 0;
while(obj){
top += obj.offsetTop;
obj = obj.offsetParent;
}
return top;
}
//判断浏览器是否支持固定定位
function checkFixed(){
var o = document.createElement('div'),
body = document.getElementsByTagName('body')[0],
fig = false;
body.insertBefore( o, body.firstChild );
o.style.cssText ='position:fixed;top:20px;margin:0;padding:0;border:none;width:0px;height:0px;';
fig = o.offsetTop==20;
body.removeChild(o);
return fig;
}
})()
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航