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

Question

我有一个文章页面，它使用基于 Twitter Bootstrap 的流畅布局。

当顶部导航栏位于浏览器窗口的顶部时（因此它会粘住），顶部导航栏会使用以下技术固定：

http://www.bennadel.com/blog/1810-Creating-A-Sometimes-Fixed-Position-Element-With-jQuery.htm

使用上述技术并使用此线程中的答案，侧边栏也同时变得固定：

修复了流体推特引导程序 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;"

这是我创建的演示：

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

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

谢谢。

Answer 1

看看我在这篇文章（视差侧边栏滚动）上的回答，它重现了您在 readwrite.com 上看到的侧边栏滚动行为。

Answer 2

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;
}

在以下小提琴中使用：http: //jsfiddle.net/technotarek/m7eKD/