专注于discuz,uchome,dedecms等各类PHP程序仿站(二次开发和模板制作)。

« »

浮动层并跟随页面屏幕滚动防抖动

本代码主要用CSS“position: fixed;”

下面直接放代码:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”ru”>
<head>
<title></title>
<style type=”text/css”>

/*防止抖动*/
html{

_background-image:url(about:blank);
_background-attachment:fixed;

body{
height:1000px;

}
#sitefocus{
background: none repeat scroll 0 0 #FFFFFF;
bottom: 10px;
overflow: hidden;
position: fixed;
_position: absolute;
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)+’px’);
right: 10px;
width: 270px;
z-index: 300;
}
* html .focus {
position: absolute;
}
.bm {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CDCDCD;
margin-bottom: 10px;
}
.bm_h {
background: none repeat scroll 0 0 #F2F2F2;
border-bottom: 1px solid #C2D5E3;
border-top: 1px solid #FFFFFF;
height: 31px;
line-height: 31px;
overflow: hidden;
padding: 0 10px;
white-space: nowrap;
}
</style>
</head>
<body>

<div id=”sitefocus”>
<div>
<div>
<a title=”关闭” style=”float:right;” onclick=” document.getElementById(‘sitefocus’).style.display=’none’” href=”javascript:;”>关闭</a>
<h2>站长推荐</h2>
</div>
<div>
<dl>
<dt><a target=”_blank” href=”">庆祝人才频道上线,发简历</a></dt>
<dd>庆祝人才频道上线,发简历庆祝人才频道上线,发简历庆祝人才频道上线,发简历庆祝人才频道上线,发简历</dd>
</dl>
<p><a target=”_blank”  href=”">查看>></a></p>
</div>
</div>
</div>

<!–script type=”text/javascript”>
var BROWSER = {};
var USERAGENT = navigator.userAgent.toLowerCase();
browserVersion({‘ie’:'msie’,'firefox’:”,’chrome’:”,’opera’:”,’safari’:”,’mozilla’:”,’webkit’:”,’maxthon’:”,’qq’:'qqbrowser’});

function browserVersion(types) {
var other = 1;
for(i in types) {
var v = types[i] ? types[i] : i;
if(USERAGENT.indexOf(v) != -1) {
var re = new RegExp(v + ‘(\\/|\\s)([\\d\\.]+)’, ‘ig’);
var matches = re.exec(USERAGENT);
var ver = matches != null ? matches[2] : 0;
other = ver !== 0 && v != ‘mozilla’ ? 0 : other;
}else {
var ver = 0;
}
eval(‘BROWSER.’ + i + ‘= ver’);
}
BROWSER.other = other;
}
function showFooterDiv() {
var viewPortHeight = parseInt(document.documentElement.clientHeight);
var scrollHeight = parseInt(document.body.getBoundingClientRect().top);
if (BROWSER.ie && BROWSER.ie < 7) {
document.getElementById(‘sitefocus’).style.top = viewPortHeight – scrollHeight – 24 + ‘px’;
}
}
function _attachEvent(obj, evt, func, eventobj) {
eventobj = !eventobj ? obj : eventobj;
if(obj.addEventListener) {
obj.addEventListener(evt, func, false);
} else if(eventobj.attachEvent) {
obj.attachEvent(‘on’ + evt, func);
}
}
_attachEvent(window, ‘scroll’, function(){showTopLink();showFooterDiv();});
</script–>
</body>
</html>

原创文章如转载,请注明:转载自火跃工作室
本文网址:http://www.huoyue.org/position-fixed-css

日志信息 »

该日志于2012-07-06 21:30由 火跃 发表在CSS+HTML分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

相关日志 »

  • 暂无相关日志

没有评论

发表评论 »