使用CSS強制元素滾動條到頂部

我的網站上有一個容器，它的寬度是屏幕寬度的100％，並且使用overflow: auto有自己的滾動條。標準的滾動條不會顯示在我的網站上，我用它來代替，因爲在我的網站的主層後面還有另一層，它也有自己的滾動條（您可以view my site here並點擊博客文章查看我的意思）。使用CSS強制元素滾動條到頂部

我有一個藍條，我想要固定到屏幕的頂部。就這樣定位而言，這非常容易，但是該條的寬度需要爲屏幕寬度的100％，並且我發現該條將與應用於其父容器的滾動條重疊。

這裏是在我的意思是一個jsFiddle：http://jsfiddle.net/xUTR2/1/

我想過只是抵消了酒吧基於滾動條的寬度左側，但後來我決定，我不能靠估計滾動條在不同瀏覽器中的寬度，如果沒有滾動條，則會留下空隙。

是否有一種明顯的方法來強制滾動條渲染ontop？

來源

2012-10-04 Marty

你有沒有試過'z-index' – Anirudha

@Anirudha什麼......？除非你的意思是我可以特別修改滾動條的z-index？ – Marty

@Anirudha'z-index'不會讓滾動條出現在頂端 –

你可以通過jquery輕鬆地做到這一點，在某些事件。

$("body").load(function() { 
    $('scrollable container').css('overflow-y', 'auto'); 
});

嘗試將藍條和其他頁面內容保存在不同的容器中，我認爲它會爲您解決問題。

來源

2012-10-04 07:10:12 Rohit416

由於我還不能評論，我不得不給出答案。
如果我正確的，你想獲得固定位置的頂部藍色條，如可見，同時向下滾動。

個人而言，我會做單獨的容器
像

<div id='page'> 
    <div id='bluebar'></div> 
    <div id='content'></div> 
</div>

演示可以發現here（http://limpid.nl/lab/css/fixed/header）

來源

2012-10-04 07:10:43 Marcel

這是不可能在清潔/健壯樣的方式來實現的，因爲什麼，你的位置因爲在主瀏覽器的上下文中（以及它在任何滾動條的內部）完成了固定的操作，但是因爲您刪除了主體滾動條（並且您必須因爲無法在其頂部的z-index位置），所以它並不認爲什麼都有，但你有這個div在它下面，所以你唯一的選擇是使用兩個元素的固定邊距和高度，或者使用some javascript method來確定頂部div的正確寬度。

來源

2012-10-04 07:53:11

使用CSS強制元素滾動條到頂部

回答

相關問題