jQuery Mobile：使用固定標題的固定側欄

Question

我想在頁面左側有一個垂直分割視圖欄，它的狀態與data-position="fixed"標題欄一樣是固定的。

像在this example（編輯：現在這個鏈接已損壞），但左側的列表也是固定的，與標題一起標記。

我想過試圖將它插入標題中以便「繼承」固定位置。不知道這是否會奏效。

這是我的樣式表的內容。

.content-right { 
    float: right; 
    width: 75%; 
} 
.content-left { 
    width: 23%; /* Not 25%: I am not using padding */ 
} 

.content-right div首先出現在HTML中。

如果固定標題被隱藏（通過點擊），但是這並不是那麼重要（我現在可以強制點擊隱藏），我還想讓這個欄杆優雅地向上滑動。

Answer 1

我想出的解決方案是左側固定div，右側是自然滾動的實際「頁面」。

由於我的左div拉開了頁面，所以在桌面瀏覽器上，滾動條也離開頁面。這需要處理。不過，在iOS5上，使用-webkit-overflow-scrolling: touch的固定div滾動功能完美！

Answer 2

開箱即用。

您可以使用我的multiview plugin，這是在工作中。我現在正在完成導航和麪板歷史記錄。加上修復平板電腦/智能手機視圖的一切如果你不介意現在仍然存在的bug，它就可以使用了（請在Github上發佈問題）。

這裏是一個示例頁面，我的工作目前正與測試：sample-overthrow

這種看法鎖定各小組分別使用overthrow屏幕和滾動。除了向包裝頁面添加data-scrollmode =「overthrow」以外，沒有其他配置。檢查HTML以查看其設置。另外要小心，這是我第一次嘗試整合Overthrow，但它還不是很流暢。

其中整個頁面像常規JQM頁面一樣滾動。這是默認行爲。您可以並排使用1/2/3面板（需要將它們標記爲「菜單」，「中」和「主」，我將從代碼中刪除「全寬」 - 在以前的版本中使用），所以如果你只想在側面使用「navbar/sidebar」，只需使用寬度爲50px的菜單並將工具欄放在那裏。主面板應自動縮放以填充屏幕。我也開始使用允許滑入/滑出工具欄的yield模式。還沒有完成這個呢。