如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

时间 2019-11-07

标签如何 div 固定页面某个位置随着滚动条随意滚动栏目 CSS 繁體版

原文原文链接

这里稍微总结一下，那就是利用JavaScript脚本，从浏览器中获取各个关于位置的参数，而后将其计算后，定位在窗体的右下角。能够认可，这个方法确实是比较天然的想法，也是很常见的方法，可是这样的方法有如下几个缺点： css

一、使用了大量的计算，每次滚动，都少不了一大堆的运算。

二、使用了JavaScript脚本，脚本这东西受到浏览器的限制，即使没有限制，也一样由于网页的下载模式问题，可能由于脚本下载未完成或者下载失败而导致脚本没法正确运行。

三、条条大路通罗马，可是看看那方块，当快速滚动滚动条的时候，会发现那个可爱的方块抖动地厉害。这也难怪，那么多的计算谁能受得了？

那有没有比较“平静”高效的表示方式呢？好比是否有一种用CSS的方式呢？ html

首先，咱们将目光投向了CSS规范，我想不少人和我同样很快就想到了position属性，说到定位，咱们很容易想到这个属性。这个属性一共有四个选项：static、relative、absolute、fixed（详情请点击）。很高兴，咱们在阅读了相关的注释后，咱们大概能看到fixed是比较符合咱们的需求的：浏览器

fixed: 安全

位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可经过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工做于 IE7（strict 模式）。测试

因而咱们很快就有了如下的代码，不过很遗憾，IE中并不能经过严格的测试，可是FireFox中却能够经过测试！ spa

< html >
< head >
     
     < title > Only fit FireFox!  :( </ title >
     
     < style type ="text/css" >
        .fixed_div {
            position : fixed ;
            left : 200px ;
            bottom : 20px ;
            width : 400px ;
         }
     </ style >
</ head >
< body >
     < div class ="fixed_div" style ="border:1px solid #200888;" > content, I'm content </ div >
     < div style ="height:888px;" ></ div >
</ body >
</ html >

无论上面上面说的IE7的strict模式，很显然，除了IE7，咱们的挑战还有包括IE6在内的一大堆未知的因素。很显然，虽然这个方法经过了FireFox，但咱们仍是宣告失败了。 .net

难道咱们只能使用JavaScript让这一切继续“卡”下去么？（我指的是用JavaScript的时候效果很卡） htm

固然不行，咱们的症结究竟在哪？咱们该如何去解除它呢？带着这样的郁闷，咱们须要开始新的探险。 blog

HTML到底是啥？ ip

这个问题换在别的地方问，您可能要搬出一大堆的文档来告诉我HTML的定义，但这里我并不须要那么完整的答案。咱们知道HTML是由一大堆的<tag></tag>组成的，而这一大堆的<tag></tag>组合在一块儿，它们的结构就像一棵树，是的，HTML的代码就是被解释为了一棵树被浏览器所认识。它有一个根，那就是<html></html>节（root），在根节点下常见的节点中，咱们一般能见到<head></head>和<body></body>两个节点，它们之下又有……

如今回顾一下咱们的问题，咱们的问题是咱们滚动滚动条的时候咱们但愿其中的一个指定的div不会跟着滚动条滚动。

那么下面让咱们来回答另外一个问题，啥是滚动条？

滚动条，顾名思义，就是能够滚动的条（ScrollBar）（废话）。准确地说，滚动条一般是咱们在页面的内容超过了浏览器显示框的范围的时候，为了可以让有限的空间展现无限的内容所做出的一个妥协的元素，使用它可让咱们查看当前页面内容以外部分的内容。

说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是否是也在咱们的HTML中呢？又或者它是浏览器的固有的一部分？

若是您以为它是HTML中的一部分，那么您就对了，由于它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并非浏览器固有的一部分，浏览器只是默认完整展现了一整个html文档，并不知道它中间的内容到底是否须要滚动条的支持。

那么让咱们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么咱们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设咱们的div标签所设置的定位属性不管如何（四个可能的属性皆没起到什么做用）改变不了自身显示情况。咱们可否更换一个思路呢？

刚才我说了，滚动条是容器所固有的，不论是外面那个滚动条，仍是里面那个滚动条。那么我可否让这个须要固定的div和那个body或者html容器脱离关系呢？

看到滚动条的控制能够经过CSS的overflow的几个属性来控制，想必你们都不陌生了。（陌生的朋友点击相关连接便可进入查看）

那么我是否能够本身设置两个彻底隔离的div来模拟这种场景呢？（虽然说是模拟，可是效果如出一辙噢～）

< html >
< head >
     < title ></ title >
     < style type ="text/css" >

        html,body {
            overflow : hidden ;
            margin : 0px ;
            width : 100% ;
            height : 100% ;
         }

        .virtual_body {
            width : 100% ;
            height : 100% ;
            overflow-y : scroll ;
            overflow-x : auto ;
         }

        .fixed_div {
            position : absolute ;
            z-index : 2008 ;
            bottom : 20px ;
            left : 40px ;
            width : 800px ;
            height : 40px ;
            border : 1px solid red ;
            background : #e5e5e5 ;
         }
     </ style >
</ head >

< body >
< div class ="fixed_div" > I am still here! </ div >
< div class ="virtual_body" >
     < div style ="height:888px;" >
        I am content !
     </ div >
</ div >
</ body >
</ html >

分析：

html,body：将默承认能会随机出现的滚动条，彻底地隐藏了，这样无论您放了啥内容，它们都不会出来了。

.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了全部可视的浏览器窗体显示全部的内容，并垂直容许出现滚动条。

.fixed_div：这下它能够利用绝对值进行定位了，由于在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就能够自认为是在某个点蹲坑了，绝对安全。

想必您经过这些代码已经了解了新的方法不过是将一个div换做了以前的body。

经过这篇文章，但愿您能解决这个问题，更深刻一点，但愿您可以对HTML的具体内容有更深入地理解，同时预祝北京奥运会顺利开幕，也祝愿全部运动员都能取得好成绩。