js页面滚动时层智能浮动定位实现javascript
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<me...
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>js页面滚动时层智能浮动定位实现</title><br />
<style type="text/css">
#inner{
margin-top:10px;
width: 100%;
height: 20px;
padding: 0px;
line-height: 22px;
text-align:justify;
color: #000000;
border:1px solid #ffecb0;
background:rgba(255,254,224,.7);
box-shadow:2px 2px 7px rgba(0,0,0,.2);/*阴影*/
border-radius: 4px; /*圆角*/
}
</style>
</head>
<body>
<div style="height:30px;background:#ccc;"></div>
<div id="inner">im here all never give up !</p></div>
<div style="height:2000px;"></div>
<script language="javascript">
(function(){
var obj = document.getElementById("inner");
var top = getTop(obj);
var isIE6 = /msie 6/i.test(navigator.userAgent);
window.onscroll = function(){
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > top){
obj.style.position = (isIE6) ? "absolute" : "fixed";
obj.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";
} else {
obj.style.position = "static";
}
}
function getTop(e){
var offset = e.offsetTop;
if(e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
})()
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>js页面滚动时层智能浮动定位实现</title><br />
<style type="text/css">
#inner{
margin-top:10px;
width: 100%;
height: 20px;
padding: 0px;
line-height: 22px;
text-align:justify;
color: #000000;
border:1px solid #ffecb0;
background:rgba(255,254,224,.7);
box-shadow:2px 2px 7px rgba(0,0,0,.2);/*阴影*/
border-radius: 4px; /*圆角*/
}
</style>
</head>
<body>
<div style="height:30px;background:#ccc;"></div>
<div id="inner">im here all never give up !</p></div>
<div style="height:2000px;"></div>
<script language="javascript">
(function(){
var obj = document.getElementById("inner");
var top = getTop(obj);
var isIE6 = /msie 6/i.test(navigator.userAgent);
window.onscroll = function(){
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > top){
obj.style.position = (isIE6) ? "absolute" : "fixed";
obj.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";
} else {
obj.style.position = "static";
}
}
function getTop(e){
var offset = e.offsetTop;
if(e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
})()
</script>
</body>
</html>
下一篇：JS将人民币小写金额转换为大写
我要评论