zoukankan      html  css  js  c++  java

  • 通过css/js来固定div的位置

    一：先来看看用css的，需要在css里面写表达式，但是一闪一闪的。赋值变量"ignoreMe",并且"document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop"(这是ie的一个bug)。

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3 <HEAD>
 4 <TITLE> css test </TITLE>
 5 <style>
 6 #LoadingStatus{
 7 position:fixed !important;
 8 position:absolute;
 9 top:100px;
10 top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
11 margin:0 0 0 -110px;
12 width:220px;height:19px;
13 left:50%;
14 text-align:center;
15 border:1px solid red;
16 }
17 </style>
18 </HEAD>
19 <BODY>
20   <div id="LoadingStatus" style="display:none;"> loading...</div>
21     <div style="height:1024px">
22         <input type="button" onclick="document.getElementById('LoadingStatus').style.display=''" value='显示loading' />
23       </div> 
24       <div>
25       <input type="button" onclick="document.getElementById('LoadingStatus').style.display=''" value='显示loading' />
26     </div>
27 </BODY>
28 </HTML>

    二：用JS写的，其实完全能套用到css中，与上面的没什么。需要注意的是，在FF下，左上右上两个仍然浮动。在IE下，全部固定，但是一闪一闪的。其中要斟酌使用。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <HTML>
 3 <HEAD>
 4 <TITLE>JAVASCRIPT</TITLE>
 5 <META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="UTF-8">
 6 </HEAD>
 7 <style>
 8 <!--
 9 .div {
10     position: absolute;
11     border: 2px solid red;
12     background-color: #EFEFEF;
13     line-height:90px;
14     font-size:12px;
15     z-index:1000;
16 }
17 -->
18 </style>
19 <BODY>
20 <div id="Javascript.Div1" class="div" style=" 240px; height:90px" align="center">正中...</div>
21 <SCRIPT LANGUAGE="JavaScript">
22 function sc1(){
23 document.getElementById("Javascript.Div1").style.top=
24    document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2+"px"
25 document.getElementById("Javascript.Div1").style.left=
26    document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2+"px";
27 }
28 </SCRIPT>
29 <div id="Javascript.Div2" class="div" style=" 240px; height:90px;" align="center">左上...</div>
30 <SCRIPT LANGUAGE="JavaScript">
31 function sc2(){
32 document.getElementById("Javascript.Div2").style.top=document.documentElement.scrollTop;
33 document.getElementById("Javascript.Div2").style.left=document.documentElement.scrollLeft;
34 }
35 </SCRIPT>
36 <div id="Javascript.Div3" class="div" style=" 240px; height:90px;" align="center">左下...</div>
37 <SCRIPT LANGUAGE="JavaScript">
38 function sc3(){
39 document.getElementById("Javascript.Div3").style.top=
40     document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight+"px";
41 document.getElementById("Javascript.Div3").style.left=document.documentElement.scrollLeft;
42 }
43 </SCRIPT>
44 <div id="Javascript.Div4" class="div" style=" 240px; height:90px;" align="center">右上...</div>
45 <SCRIPT LANGUAGE="JavaScript">
46 function sc4(){
47 document.getElementById("Javascript.Div4").style.top=document.documentElement.scrollTop;
48 document.getElementById("Javascript.Div4").style.left=
49     document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth+"px";
50 }
51 </SCRIPT>
52 <div id="Javascript.Div5" class="div" style=" 240px; height:90px;" align="center">右下...</div>
53 <SCRIPT LANGUAGE="JavaScript">
54 function sc5(){
55 
56 document.getElementById("Javascript.Div5").style.top=
57     document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight+"px";
58 document.getElementById("Javascript.Div5").style.left=
59     document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth+"px";
60 }
61 </SCRIPT>
62 <SCRIPT LANGUAGE="JavaScript">
63 <!--
64 function scall(){
65 sc1();sc2();sc3();sc4();sc5();
66 }
67 window.onscroll=scall;
68 window.onresize=scall;
69 window.onload=scall;
70 //-->
71 </SCRIPT>
72 <div style="position: absolute; top: 0; left: 0;  10000px; height: 4000px;"></div>
73 </BODY>
74 </HTML>

    三：这个仍然是用js写的，不过在IE浏览器的滚动过程中，不会一闪一闪的。兼容效果很好。

     1 <!DOCTYPE HTML>
 2   <html>
 3   <head>
 4     <meta http-equiv="content-type" charset="utf-8" />
 5     <title>Js跟随滚动条移动的DIV</title>
 6   </head>
 7   <style type="text/css">
 8   *{margin:0;padding: 0;background-color:#000; }
 9   div#con{width: 800px;margin: 0 auto;}
10   div.pop{width:800px;font-size: 18px;background:yellow;padding:20px 0;margin:20px auto;border:1px solid yellow;text-align: center;color: #000;}
11   p{width:800px;padding:20px 0;background:#fff;border:1px solid #000;margin:20px auto;text-align: center;}
12   div.active{position: fixed;top: 100px;z-index: 100;margin: 0;_position: absolute;}
13   </style>
14   <body>
15   <div id="con" style="height:2000px;">
16   <p>我是元素p</p>
17   <div id="myDiv" class="pop active">
18     我是随屏幕滚动的DIV，我距离顶部高度适中为100px，修改css就可以修改该值
19   </div>
20   
21   <p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p style="color:red;position:fixed;top:400px;">我是元素top:400px;看是否支持固定定位</p>
22   </div>
23     <script type="text/javascript">
24     (function(){
25         //if(navigator.userAgent.toLocaleLowerCase().indexOf('msie 6.0;')>1){
26         if(checkFixed()){
27             return ;
28         }//只需对不支持固定定位的浏览器做处理
29         
30         //将下面需要使用的dom相关操作在scrollDiv外面提取一次，避免多次dom操作
31         var fixedObj = document.getElementById("myDiv"),
32             height = fixedObj.offsetHeight,//标签高度提前读取出来
33             firstTop =getTop(fixedObj),//记录页面一开始标签所在位置
34             timer;
35             window.onscroll = function(){//这里做个延时执行，可以减少scroll执行频率
36                 clearTimeout(timer);
37                 timer = setTimeout(function(){
38                     scrollDiv()
39                 },30);
40             }
41 
42         function scrollDiv(){
43             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
44             fixedObj.style.top=(firstTop+scrollTop)+'px';
45         }
46         //获取元素在页面里top值
47         function getTop(obj) {
48             var top = 0;
49             while(obj){
50                 top += obj.offsetTop;
51                 obj = obj.offsetParent;
52             }
53             return top;
54         }
55         //判断浏览器是否支持固定定位
56         function checkFixed(){
57             var o = document.createElement('div'),
58                 body = document.getElementsByTagName('body')[0],
59                 fig = false;
60             body.insertBefore( o, body.firstChild );
61             o.style.cssText ='position:fixed;top:20px;margin:0;padding:0;border:none;0px;height:0px;';
62             fig = o.offsetTop==20;
63             body.removeChild(o);
64             return fig;
65         }
66     })()
67   </script>
68   </body>
69   </html>
  • 相关阅读:
    HDU
    01字典树模板
    扩展欧几里得和乘法逆元
    HDOJ-1156 Brownie Points II 线段树/树状数组（模板）
    CF-825E Minimal Labels 反向拓扑排序
    CF-831D Office Keys 思维题
    RMQ 解决区间查询问题
    hdu 5073 有坑+方差贪心
    hdu 5074 相邻数和最大dp
    hdu 5078 水题
  • 原文地址：https://www.cnblogs.com/Truke/p/2954770.html
Copyright © 2011-2022 走看看