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模式。还没有完成这个呢。