随屏幕滚动

最新推荐文章于 2024-08-07 21:02:54 发布

bingling8421

最新推荐文章于 2024-08-07 21:02:54 发布

阅读量440

点赞数

文章标签： function class ie html

本文链接：https://blog.csdn.net/bingling8421/article/details/6199842

版权

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>cssass.com</title>
<style type="text/css">
*{padding:0;margin:0;}
html{height:100%}
body{height:200%}
.top{height:100px;background:#ccc;}
.fix{width:100px;height:100px;background:#999;}
</style>
</head>
<body>
<div class="top">header</div>
<div class="fix" id="fix">滚动窗口到某高度是此元素表现fixed效果</div>
</body>
<script type="text/javascript">
var $id=function(id){
return (document.getElementById(id)) || id;
}
var tip = function(space){    // 离窗口上方多少值时，开始fixed
var ie6 = /msie 6/i.test(navigator.userAgent);
var fix= $id('fix');
var top= fix.offsetTop;
var fixed = function(){
   var pos = document.documentElement.scrollTop + document.body.scrollTop;
   if(pos+space >= top){
    ie6 ?
    void(fix.style.position = "absolute") + void(fix.style.top=pos+space+"px") :
    void(fix.style.position = "fixed") + void(fix.style.top = space + "px");
   }
   else{
    ie6 ?
    void(fix.style.position ="") + void(fix.style.top=top+"px") :
    void(fix.style.position ="") + void(fix.style.top=top+"px");
   }
};
return fixed;
};
window.onscroll = tip(20);
</script>
</html>

bingling8421

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随屏幕滚动

<br /><!doctype html><br /><html><br /><head><br /><meta charset="UTF-8" /><br /><title>cssass.com</title><br /><style type="text/css"><br />*{padding:0;margin:0;}<br />html{height:100%}<br />body{height:200%}<br />.top{height:100px;background:#ccc;}<br />
复制链接

扫一扫