我有一个文章页面,它使用基于 Twitter Bootstrap 的流畅布局。
当顶部导航栏位于浏览器窗口的顶部时,它会固定(因此它会粘住)使用这种技术:
http://www.bennadel.com/blog/1810-Creating-A-Sometimes-Fixed-Position-Element-With-jQuery.htm
使用上述技术并使用此线程中的答案,侧边栏也会同时固定:
Fixed sidebar navigation in fluid twitter bootstrap 2.0
一旦导航栏位于浏览器窗口的顶部,滚动条就会按预期出现在侧边栏的右侧,但是我想创建一个类似于这些示例的自定义滚动条:
http://readwrite.com/2012/11/07/how-technology-will-fare-in-president-obamas-second-term
我试过使用像
这样的技术http://manos.malihu.gr/jquery-custom-content-scroller/
但没有成功。还因为顶部导航栏是固定的并且他的 50px
高,由于 “top:50px;”
属性,固定侧边栏的滚动条超出了底部的 View 。
这是我创建的演示:
http://jsfiddle.net/iagdotme/uvp8t/
如何创建 The Next Web 或其他示例中使用的自定义滚动条效果并解决高度问题?
谢谢。
最佳答案
TNW 使用一个名为 Tiny Scrollbar 的插件ReadWrite 使用 jScrollPane .你试过其中任何一个吗?请考虑使用其中之一在 jsFiddle 上进行一些处理,如果高度问题仍然存在,然后重新发布。
一旦你让 jScrollPane 开始工作,这里有一些 CSS 可以帮助你开始自定义滚动条:
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.jspVerticalBar, .jspTrack {
background:none;
}
.jspDrag {
background:#ccc;
border-radius:10px;
}
用于以下 fiddle :http://jsfiddle.net/technotarek/m7eKD/
关于jquery - 如何在流畅的 Twitter Bootstrap 布局中为固定位置侧边栏创建自定义滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13272837/