首页 新闻 会员 周边 捐助

页面往下滚动后,一块DIV如果滚动到头后一直保持在最上面?

0
[已解决问题] 解决于 2012-05-16 14:29

具体的效果可以看一下:

http://www.qiushibaike.com/

 

能不能用纯CSS实现?

Dozer的主页 Dozer | 初学一级 | 园豆:30
提问于:2012-01-21 17:05
< >
分享
最佳答案
3

可以尝试用这样的代码:

z-index: auto;

position: fixed;

margin:.....以下就不用多说了吧!

奖励园豆:5
夜 风 | 菜鸟二级 |园豆:225 | 2012-02-13 13:40
其他回答(1)
0

不能,如果只是想在页面上固定一个东西的位置,可以用position来实现,但他们这个,本来就在一个位置,向下滚动超过这个位置才会开始固定,必须要用到JS,下面是我精简过的这个页面,你可以试试看下:

View Code
<!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"/>
<style type="text/css">
.col1
{width:620px;float:left;margin:23px 40px 20px 0; position:relative;}
.div1
{}
.div2
{position:fixed;_position:absolute;top:0;z-index:300;}
</style>
</head>
<body>
<div class="page">

<div class="col1">
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
<div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div><div>aa</div>
</div>


<div>bb</div>
<div id="float" class="div1">
ddddddddddddd
</div>
<script type="text/javascript">
window.onload
=
function(){
var oDiv=document.getElementById("float");
var H=0;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
window.onscroll
=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";}
else{oDiv.className="div1";}
};
}
</script>
</body>
</html>
丁学 | 园豆:18730 (专家六级) | 2012-01-25 23:28
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册