如何垂直固定div元素？

我想垂直但不是水平固定的div元素。目前，我使用jQuery更新每次滾動發生時的位置top，但我不希望它看到移動。我希望它能夠在不移動的情況下得到修復。有沒有辦法做到這一點？如何垂直固定div元素？

----------------- 
|   |  | 
|   |  | 
| div A | div B | 
|   |  | 
|   |  | 
|   |  | 
-----------------

向下滾動

----------------- 
| div A |  | 
|   |  | 
|   | div B | 
|   |  | 
|   |  | 
|   |  | 
-----------------

我希望能夠保持Div B垂直固定的，而Div A滾動向下和向上。但是當我滾動左右時，我的手杖Div A和Div B移動。

我注意到Twitter使用類似的東西。一旦你點擊推文，右側顯示推文詳情的元素就會被真實地修復。我不知道他們是如何做到的。當向下滾動右側面板時，請參見第二張圖片。

enter image description here

2圖像：

enter image description here

來源

2011-12-12 Sam

Twitter使用css屬性：position: fixed;這肯定是最好的方式。

這正是它所說的，它修復了位置。通過使用top，right，bottom和left屬性，您可以設置div的確切位置。

編輯13-12-11（真棒日期！）

屬性position: fixed;不能影響在一個座標軸的定位性能。這意味着，你不能向左或向右滾動，就像你想要的那樣。

我強烈建議你應該避免超出屏幕寬度，使用元素寬度的百分比。你也可以堅持你的JavaScript。

但是，您可以先使用我建議的方法，但使用滾動事件偵聽器更改左側屬性，以便在滾動時增加或減少左側偏移量。因爲jQuery的糟糕的跨瀏覽器支持，我會去jQuery。我認爲你可以在原型庫上做同樣的事情，但是我對這個庫不熟悉。

的jQuery（谷歌瀏覽器的工作）：

var offset = 400; // left offset of the fixed div (without scrolling) 

$(document).scroll(function(e) { 
    // b is the fixed div 
    $('.b').css({ 
     'left': offset - $(document).scrollLeft() 
    }); 
});

看一看在live demo

您可能需要將document對象更改爲您選擇的另一個對象或選擇。

來源

2011-12-12 13:37:53

我用'position：fixed;'。它大部分時間都是有效的，但問題是，當你第一次打開頁面時，如果「Div B」只顯示了一半，而你想滾動到右側看整個事物，它不會允許您。它將保持不變。 – Sam

山姆，請提供您的html代碼，以便我們可以看到您正在嘗試做什麼 – Francisco

@Sam看看我的編輯，應該適合您 –

使用position:fixed的風格，並設置固定width爲div。像素中還設置了top和left或right。

來源

2011-12-12 13:25:16 Pritom

這並沒有回答這個問題：OP想知道如何保持右側面板「固定」，所以如果視口滾動它保持在最前面。 – buddhabrot

設置風格爲位置：固定，也許。和重點。也許我無法完全理解這個問題。 – Pritom

我的答案與答案下面的答案相同。我之前在我的評論中修正了它，現在修復了我的回答，但是爲什麼-1 ???????????? – Pritom

很多人都想要這樣，但不幸的是，純粹的CSS並沒有提供完成這個非常簡單，非常有用的任務的方法。我發現的唯一方法是給出div位置：固定的。但是，正如您發現的那樣，這會修復x和y軸上的div。

在我看來，這是CSS的一大失敗。我們確實需要像CSS位置這樣的東西：fixed-x和position：fixed-y。我發現這樣做的唯一方法是在SetInterval（）超時（我使用.10秒）上輸入一段JavaScript代碼，該代碼重新定位需要更改的軸上的div。

在你的情況下（如果我正確地閱讀你的問題），你會改變每個SetInterval（）tick的DivB的頂部：將DivB移動到你想要它在視口中的位置。容易做到，它的工作，只是一個不必要的痛苦。

您可能會問，也正確地說，爲什麼當滾動事件觸發時，您（和我）無法進行此操作。答案是滾動事件不是在某些版本的IE中觸發。

如果你可以使這取決於瀏覽器的滾動事件，這將是一個巨大的進步。

HTH。

來源

2011-12-12 14:06:54

這很容易用正確的標記和CSS完成。您需要一個容器（div，section等）來包含您的兩個內容區域。在以下示例中，我利用JSFiddle呈現小提琴的內容的方式，但該技巧與JSFiddle之外的技術相同。

Live example.

首先，我們需要的標記：

<div id="container"> 
    <div id="divA"> 
     <p>This div will scroll.</p> 
    </div> 
    <div id="divB"> 
     <p>This div will not scroll.</p> 
    </div> 
</div>

之後，CSS：

#container { 
    height: 100%; 
    postition: relative; 
    width: 100%; 
} 

#divA { 
    background: #ccc; 
    height: 300%; /* So we can see scrolling in action */ 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 25%; 
} 

#divB { 
    background: #c55; 
    height: 100%; 
    position: fixed; 
    right: 0; 
    width: 75%; 
}

在這個例子中，我採取的事實，即的jsfiddle將創建一個查看有限大小的端口。因此，我可以用百分比來指定我的所有尺寸。

請注意，我將容器的位置設置爲相對位置。這樣我可以將divA和divB的位置模型設置爲「絕對」和「固定」，以便它們將根據「容器」生成的方框進行定位。這是解決您的問題的關鍵部分。

來源

2011-12-12 14:42:46

如何垂直固定div元素？

回答

相關問題