您现在的位置: 365建站网 > 365学习 > 让层固定,不随滚动条拖动而动

让层固定,不随滚动条拖动而动

文章来源:365jz.com     点击数:2843    更新时间:2010-01-21 22:36   参与评论

今天遇到两个问题
第一个是让页面不出现横向滚动条。当时是我们提供一张页面被IFRAME到另一个页面上。为了页面美观,我们必须控制页面的滚动条显示
这个问题的解决很方便
只要保证样式里对HTML的控制即可
<style>
/*设置不出现横向滚动条*/
html{overflow-x:hidden}
/*设置不出现纵向滚动条*/
html{overflow-y:hidden}
/*设置不出现滚动条*/
html{overflow:hidden}
</style>
但第二个问题整理了半天,即是让某个层固定在页面上某特定位置不动,而下面的层可以根据需要滚动起来。前提(html代码不能变)。当时也只用保证IE有效即可。
解决方案见下
CSS:
 <!--[if IE 6]>  
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
.top-bar{position:absolute;}
</style>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
.top-bar{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
</style>
<![endif]-->
XHTML:
<!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>
.......
</head>
<body>
<div id="fav">
 <div class="top-bar">
  <p class="w4"><span class="f-tab-t current">供应信息</span></p>
  <p class="w4"><span class="f-tab-t">求购信息</span></p>
  <p class="w2"><span class="f-tab-t">公司</span></p>
 </div>
 <div class="f-tab-b">主体内容</div>
</div>
</body>
</html>
后来收集了下别人的方案,其实如果结构可以改,也有其他的解决方案

[NextPage]

例1:view plaincopy to clipboardprint?
<html
<head
<mce:style type="text/css"><!--  
html,body{  
    width:100%;  
    height:100%;  
    margin:0px;  
    padding:0px;  
    overflow:hidden;  
}  
#Main{  
    position:absolute;  
    top:0px;  
    left:0px;  
    width:100%;  
    height:100%;  
    overflow:auto;  
    z-index:1;  
}  
#ToolBar{  
 
    position:absolute;  
    top:3px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ccc;  
    z-index:2;  
    overflow:hidden;  
}  
--></mce:style><style type="text/css" mce_bogus="1">html,body{  
    width:100%;  
    height:100%;  
    margin:0px;  
    padding:0px;  
    overflow:hidden;  
}  
#Main{  
    position:absolute;  
    top:0px;  
    left:0px;  
    width:100%;  
    height:100%;  
    overflow:auto;  
    z-index:1;  
}  
#ToolBar{  
 
    position:absolute;  
    top:3px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ccc;  
    z-index:2;  
    overflow:hidden;  
}</style
</head
<body scroll="no"><!-- scrol="no" IE中必须 --> 
<div id="ToolBar">固定在上方不动</div
<div id="Main"> 
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p
<p> </p
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p
<p>&ncxvcxzvczxvcxzvczbsp;</p
<p> </p
<p> dfdf</p
<p>&nbscxzvcxzvcxzvczxvcxzp;</p
<p> </p
<p> </p
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p
<p> </p
<p> </p
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p
<p> </p
<p> </p
<p> </p
<p> </p
<p> ddddddddddddddddd</p
<p> </p
<p> </p
<p> </p
<p> </p
<p> </p
<p>&nbsxp;</p
<p> </p
<p> </p
<p>&nbxsp;</p
<p> </p
<p> </p>v  
</div
</body
</html
<html>
<head>
<mce:style type="text/css"><!--
html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:2;
 overflow:hidden;
}
--></mce:style><style type="text/css" mce_bogus="1">html,body{
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
 overflow:hidden;
}
#Main{
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 overflow:auto;
 z-index:1;
}
#ToolBar{

 position:absolute;
 top:3px;
 left:50px;
 width:300px;
 height:20px;
 background:#ccc;
 z-index:2;
 overflow:hidden;
}</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p> </p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p> </p>
<p> dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p> </p>
<p> </p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p> </p>
<p> </p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> ddddddddddddddddd</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>&nbsxp;</p>
<p> </p>
<p> </p>
<p>&nbxsp;</p>
<p> </p>
<p> </p>v
</div>
</body>
</html>

例2:view plaincopy to clipboardprint?


<!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
<mce:style type="text/css"><!--  
html,body{  
    width:100%;  
    height:100%;  
    margin:0px;  
    padding:0px;  
    overflow:hidden;  
}  
#Main{  
    position:absolute;  
    top:0px;  
    left:0px;  
    width:100%;  
    height:100%;  
    overflow:auto;  
    z-index:1;  
}  
#ToolBar{  
 
    position:absolute;  
    top:3px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ccc;  
    z-index:7;  
    overflow:hidden;  
}  
#ToolBa_2{  
 
    position:absolute;  
    top:300px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ff0000;  
    z-index3;  
    overflow:hidden;  
       color:#fff;  
}  
#ToolBa_3{  
 
    position:absolute;  
    top:600px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ff0000;  
    z-index32;  
    overflow:hidden;  
       color:#fff;  
}  
#ToolBa_4{  
 
 
    width:300px;  
    height:200px;  
    background:#ff0000;  
    z-index35;  
    overflow:hidden;  
       color:#fff;  
}  
#ToolBa_5{  
 
 
    width:300px;  
    height:200px;  
    background:#ff0000;  
    z-index39;  
    overflow:hidden;  
       color:#fff;  
}  
--></mce:style><style type="text/css" mce_bogus="1">html,body{  
    width:100%;  
    height:100%;  
    margin:0px;  
    padding:0px;  
    overflow:hidden;  
}  
#Main{  
    position:absolute;  
    top:0px;  
    left:0px;  
    width:100%;  
    height:100%;  
    overflow:auto;  
    z-index:1;  
}  
#ToolBar{  
 
    position:absolute;  
    top:3px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ccc;  
    z-index:7;  
    overflow:hidden;  
}  
#ToolBa_2{  
 
    position:absolute;  
    top:300px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ff0000;  
    z-index3;  
    overflow:hidden;  
       color:#fff;  
}  
#ToolBa_3{  
 
    position:absolute;  
    top:600px;  
    left:50px;  
    width:300px;  
    height:20px;  
    background:#ff0000;  
    z-index32;  
    overflow:hidden;  
       color:#fff;  
}  
#ToolBa_4{  
 
 
    width:300px;  
    height:200px;  
    background:#ff0000;  
    z-index35;  
    overflow:hidden;  
       color:#fff;  
}  
#ToolBa_5{  
 
 
    width:300px;  
    height:200px;  
    background:#ff0000;  
    z-index39;  
    overflow:hidden;  
       color:#fff;  
}</style
</head
<body scroll="no"><!-- scrol="no" IE中必须 --> 
<div id="ToolBar">固定在上方不动</div
 
 
 
<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div
 
<div  id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div
 
<div  id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div
 
<div  id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div
<div id="Main"> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
</div
</body
</html

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (2843人查看-4条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------