jquery - 如何在流畅的 Twitter Bootstrap 布局中为固定位置侧边栏创建自定义滚动条？

Question

我有一个文章页面，它使用基于 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://thenextweb.com/apple/2012/11/03/apple-hides-samsung-apology-on-its-uk-site-so-it-cant-be-seen-without-scrolling/

我试过使用像

这样的技术

http://manos.malihu.gr/jquery-custom-content-scroller/

但没有成功。还因为顶部导航栏是固定的并且他的 50px 高，由于 “top:50px;” 属性，固定侧边栏的滚动条超出了底部的 View 。

这是我创建的演示:

http://jsfiddle.net/iagdotme/uvp8t/

如何创建 The Next Web 或其他示例中使用的自定义滚动条效果并解决高度问题？

谢谢。

Answer 1

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/