JS/CSS上面的固定元素上方的堆棧元素

Question

我正在寫一些Javascript代碼到頁面中，該頁面預先將div放在應該保留在文檔或窗口頂部的主體上，而不管設計/內容如何頁面有，並且正常工作，直到遇到一個標題元素固定頂部。

我試圖用CSS/JS來完成的事情是，不管什麼，都要讓jsbar保持最高。如果頁面上存在元素（如示例中），那麼jsbar應該堆疊在元素上方，而不是像層或層之上一樣。換句話說，如果固定頂部：0，將其向下移動到jsbar的高度，爲所有其他元素創建新的top = 0 + heightofjsbar。

看到問題的原料基本的例子：http://jsfiddle.net/XEZ5R/

<div class="jsbar">This is dynamically created jsbar</div> 
<div class="page"> 
<header>The header bar</header> 
<div class="content">the content here </div> 
</div> 

.page { 
    position:relative; 
    top:0; 
    background:#f8f8f8; 
    height:900px; 
} 
header { 
    position:fixed; 
    top:0; 
    background:#eee; 
    height:10px; 
} 
.jsbar { 
    position:fixed; 
    top:0; 
    background:#ccc; 
    height:10px; 
} 

我將不勝感激任何想法來解決這個問題。我越少篡改頁面越好。 jsbar被寫入各種各樣的設計/元素的網站。

謝謝。

---

UPDATE：這裏是所期望的結果的一個例子： http://jsfiddle.net/Zzat9/1/（查看結果，無視HTML/CSS）

也...我只可以使用JavaScript，沒有jQuery和我只有控制我輸出/預先放在文檔頂部的Javascript和CSS ...我無法控制其他任何東西。因此，對於這裏的示例...考慮除jsbar以外的所有內容作爲所有者頁面/內容/元素。

我的想法是採用一些Javascript來查找具有相對於文檔的位置：固定或絕對的元素，然後將它們向下移動到jsbar的高度。喜歡的東西：how to query whole DOM for elements matching some computed style ? (in pure js)

---

更新2：

我想出了這個JavaScript代碼，做什麼是需要：

var docelements = document.querySelectorAll('header, div, section'); 
var jsbarheight = '25px'; 
for (var i=0, max=docelements.length; i < max; i++) 
{ 
    if(window.getComputedStyle(docelements[i],null).getPropertyValue('position')=='fixed') 
    { 
     var fixedelement = docelements[i]; 
     if(window.getComputedStyle(fixedelement,null).getPropertyValue('top')=='0px') 
     {  
      fixedelement.style.top=jsbarheight; 
      document.body.style.paddingTop=jsbarheight; 
     } 
    } 
} 

但是，這是最有效的？任何人都可以看到這個問題？立即的缺點是進行調整的延遲。

Answer 1

很抱歉，如果您不能使用jQuery，但也許這仍然會得到你開始一個JS的解決方案：

var height = $('.jsbar').outerHeight(true); 
$('.page').css("margin-top", height+"px"); 

這使得元素。第的邊距您的任何高度。 jsbar是。你可以在這裏看到jsfiddle：http://jsfiddle.net/Koubenec/Wm6k6/9/

希望這有助於！

編輯：

好吧，JS只代碼：

var finder = document.getElementsByClassName("jsbar")[0]; 
var findrheight = finder.clientHeight; 
var main = document.getElementsByClassName("page")[0]; 
main.style["margin-top"] = findrheight+"px"; 

這個作品在此的jsfiddle：http://jsfiddle.net/Koubenec/7j5cL/2/

我想你可能還是想一些元素到處移動，但是這個JS函數獲取了jsbar的高度，然後在頁面元素的頂部添加了該大小的邊距，所以它被推下。如果需要，您可以輕鬆調整以相應地定位標題。

編輯：取3-

var finder = document.getElementsByTagName("div")[0]; 
var findrheight = finder.clientHeight; 
var main = document.getElementsByTagName("header")[0]; 
main.style["margin-top"] = findrheight+"px"; 

此代碼只是找到的第一個標籤元素，得到其高度，然後查找第一個元素，並賦予它一個邊距等於jsbar的高度。這樣，您就不需要ID或類名稱即可工作。這裏是另一個jsfiddle：http://jsfiddle.net/Koubenec/7j5cL/3/