固定側邊欄與骷髏響應式佈局

我有一個簡單的雙列響應式設計與骨架樣板。側邊欄我有這個DIV，一個div容器內：固定側邊欄與骷髏響應式佈局

<div class="container"> 
    <div class="four columns"> 
     /* logo and menu */ 
    </div> 
    <div class="nine columns post"> 
     /* contents... */ 
    </div> 
</div>

我喜歡它看起來寬視口和它是如何堆積在狹窄的人的方式，但我想有側邊欄（四列div）中的較大尺寸始終固定在左側，同時滾動另一個div的內容。

試了幾件事情，但它最終搞砸了的響應式佈局，我想我沒有CSS定位有透徹的瞭解...

任何幫助表示讚賞！謝謝。

來源

2012-11-02 Cristian

其實你想做什麼？我想你想要做的是給定的div保持不變，當你滾動網站。如果你想這樣做，這是可能的。 –

確切地說，「四列」div在左側保持靜態。 – Cristian

給一個jsfiddle鏈接。 –

我讀了您正在使用的骨架樣板。

我建議您將徽標和菜單放在<nav>元素中。當關閉</nav>時，插入一個不分配空間（ ）。這個不間斷的空間將有望解決您的問題！

<div class="container"> 
    <div class="four columns"> 
     <nav> 
     /* logo and menu */ 
     </nav> 
     &nbsp; 
    </div> 
    <div class="nine columns post"> 
    /* contents... */ 
    </div>

接下來要做的事情就是去你的CSS文件，並插入：

nav{ position:fixed; width:220px; /*found the width-info on Skeleton website*/ }

讓我知道它的工作爲你！

來源

2012-11-14 20:59:18

優秀，謝謝！現在我想必須調整爲較小的視口 – Cristian

是的，這個解決方案打破了響應速度，我很想看到你的最終解決方案，Christian。 –

對於您需要有一個「粘性」的div

嘗試使用waypoints

來源

2012-11-07 04:21:11

我想這樣喜歡：http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/ 觸發這個類的側邊欄時滾動：。sticky { position：fixed; top：0; } 但是，然後邊欄獲得頂部和它下面的內容，左側對齊，就好像邊欄（.four列div）已消失:( – Cristian

固定側邊欄與骷髏響應式佈局

回答

相關問題