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

标签 jquery css twitter-bootstrap

我有一个文章页面,它使用基于 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 或其他示例中使用的自定义滚动条效果并解决高度问题?

谢谢。

最佳答案

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/

相关文章:

php - AJAX如何更改基于数据库的选择值

jquery - 单击带有很棒字体图标的按钮时,表单不会提交

jquery - 将 JQuery 对象序列化为 JSON - 这应该可行吗?

css - Bootstrap 2列一列需要滚动而另一列固定位置

javascript - 如何在关闭 Bootstrap 3 模式时重新加载页面

javascript - 如何在 asp.net web 应用程序中使用 razor 制作侧导航栏

jquery - 是否可以在 Yii 中集成数据表?

css - 如何垂直放置 Font Awesome 图标

html - 高度 CSS 属性 (100%, 100vh) 对 <html> 或 <body> 标签有什么意义吗?

html - 防止 HTML 文本扭曲可点击的覆盖