如何在流体Twitter引导程序布局中为固定位置侧边栏创建自定义滚动栏

Question

我有一个基于Twitter bootstrap的流体布局。

当它在浏览器窗口的顶部（以便粘贴）时，顶部导航栏使用此技术：

http://www.bennadel.com/blog/1810-creating-a-soteimes-fixed-position-position-element-with-jquery.htm

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

流体Twitter Bootstrap 2.0

中的固定侧栏导航

一旦导航栏位于浏览器窗口的顶部，滚动条就会像预期的那样出现在侧边栏的右侧，但是我想创建一个类似于这些示例的自定义滚动条：

http://readwrite.com/2012/11/07/how-technology-will-fare-in-president-bamas-second-term

http://thenextweb.com/apple/2012/11/11/11/11/apple-hides-samsung-samsung-apology-an-is-site-site-site-site-site-site-sith-cant-cant-be-be-seen-seen-without-scrolling/<</p>

我尝试使用

之类的技术

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

但没有成功。同样，由于顶部NAV栏是固定的，并且他的50px高，因此固定侧栏的滚动条由于"top:50px;"属性而超出了底部的视图。

这是我创建的演示：

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

如何创建下一个网络或另一个示例中使用的自定义卷轴效果并解决高度问题？

谢谢。

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

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

Answer 2

在这篇文章（视差侧栏滚动）上查看我的答案，该帖子重现了您在readwrite.com上看到的侧栏滚动行为。