如何讓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的具體內容有更深入地理解，同時預祝北京奧運會順利開幕，也祝願全部運動員都能取得好成績。