推固定位置標頭

後面的內容我已創建關於所述問題的問題小提琴在 link here 推固定位置標頭

頁眉和頁腳是絕對定位，100％的寬度。中間內容由儀表板表組成。標題由兩個圖像組成，點擊後將切換內容。
當我點擊slide-toggle-1時，顯示headerbottombar的內容。
但中間內容隱藏並重疊。
點擊slide-button-1和slide-button-2時，如何正確顯示中間內容的內容。
我想感謝所有的建議和解決方案。只要提供可行的解決方案，解決方案可以在css，jquery和javascript中被接受。

來源

2016-09-27 pallavidestiny22

對此進行詳細說明您的問題。我看到了你的代碼，它工作正常。當切換打開後面的內容必須隱藏。您想做什麼？ –

當切換打開時，我想讓div類內容跟在標題後面。在我的情況下，div類內容放在標題後面。 – pallavidestiny22

https://jsfiddle.net/d0pyxdoj/4/ – madalinivascu

爲什麼不嘗試添加帶margin-top的類以便根據需要降低div。就像這樣：只需撥動它，然後

<div class="content top">

在2次點擊一樣：

.top{ margin-top:100px; }

一下添加到您「內容」除像這樣

$(".content").toggleClass("top");

您可以提供其他樣式，但這是基本運行。

來源

2016-09-27 05:51:32

我可以提琴請 – pallavidestiny22

[小提琴] （https://jsfiddle.net/mark261092/9chua9wo/） –

更新： 如果你想有一個可變高度頭那是粘在上面，你可能需要使用一些JavaScript動態調整內容

var offset = document.getElementById("sticky-top-id").offsetHeight; 
document.getElementById("content-id").style.marginTop = offset + 'px';

Source

的上邊距舊答案：

有很多方法可以實現你想要的。一種方法是將標題的位置更改爲relative（並刪除標題和內容之間的換行符）。如果您使用fixed或absolute位置，則標題將與主體內容重疊。而相對的則會隨着標題擴展而將內容推下來。

看到這個：https://jsfiddle.net/d0pyxdoj/3/

附：頁眉/頁腳在您的代碼中的位置是fixed，而不是absolute

來源

2016-09-27 05:47:13 user6885709

在我的情況下，它是客戶的要求，標題alwasy可見，堅持頂部以及 – pallavidestiny22

所以我用頭固定定位 – pallavidestiny22

請檢查下面的例子。使用腳本的高度識別我們可以注入間距。

腳本：

function heightCalc(){ 
     topHeight = $('.sticky-top').height(); 
     $('.content').css({"margin-top": topHeight+"px"}); 
    }

例提琴手：https://jsfiddle.net/scj4u0t5/1/

來源

2016-09-27 06:53:15 RAN

推固定位置標頭

回答

相關問題