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

来源：动视网责编：小采时间：2020-11-27 15:42:56

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

通过css/js来固定div的位置_html/css_WEB-ITnose:一：先来看看用css的，需要在css里面写表达式，但是一闪一闪的。赋值变量ignoreMe,并且document.documentElement.scrollTop document.documentElement.scrollTop : document.body.scrollTop(这是ie的一个bug)。

推荐度：

点击下载本文 文档为doc格式

导读通过css/js来固定div的位置_html/css_WEB-ITnose:一：先来看看用css的，需要在css里面写表达式，但是一闪一闪的。赋值变量ignoreMe,并且document.documentElement.scrollTop document.documentElement.scrollTop : document.body.scrollTop(这是ie的一个bug)。

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

 1 2  3  4  css test  5 18 19 20 loading...21 22 23 24 25 26 27 28

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

 1 2  3  4 JAVASCRIPT 5  6  7 19 20 正中...21 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 29 左上...30 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 36 左下...37 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 44 右上...45 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 52 右下...53 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 62 63 71 72 73 74

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

1 2 3 4 5 Js跟随滚动条移动的DIV 6 7 14 15 16

我是元素p

17 18 我是随屏幕滚动的DIV，我距离顶部高度适中为100px，修改css就可以修改该值19 20 21

我是元素p