1

I have an article page which uses a fluid layout based on Twitter Bootstrap.

The top nav bar becomes fixed when it is at the top of the browser window (so that it sticks) using this technique:

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

The sidebar also becomes fixed at the same time using the above technique and using the answer in this thread:

Fixed sidebar navigation in fluid twitter bootstrap 2.0

The scroll bar appears to the right of the sidebar as expected once the nav bar is at the top of the browser window, however I want to create a custom scrollbar similar to these examples:

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/

I've tried using a technique like

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

but without success. Also because the top nav bar is fixed and his 50px high, the fixed side bar's scroll bar extends beyond view at the bottom because of the "top:50px;"attribute.

Here is the demo I have created:

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

How can I create the custom scrollbar effect as used in The Next Web or the other example and fix the height issue?

Thanks.

Community
  • 1
  • 1
iagdotme
  • 1,033
  • 2
  • 21
  • 38

2 Answers2

1

TNW utilizes a plugin called Tiny Scrollbar and ReadWrite uses jScrollPane. Have you tried either of those? Please consider working up something on jsFiddle with one of those and then re-post if the height issue remains.

And once you get jScrollPane working, here is some CSS to get you started on the custom scroller:

.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}

.jspVerticalBar, .jspTrack {
    background:none;
}


.jspDrag {
   background:#ccc;
   border-radius:10px;
}

Used in the following fiddle: http://jsfiddle.net/technotarek/m7eKD/

technoTarek
  • 3,218
  • 2
  • 21
  • 25
  • Thanks. I tried these plugins before, but it is encouraging to know that these websites use these plugins. Unfortunately I couldn't get them to work last time and I still can't. I have created a new jsFiddle forked from the previous one but adding in jScrollPane. The scrollbar does not show- I am getting the classes `jspContainer` and `jspContainer` added but not the scrollbar classes `jspVerticalBar` etc. Any ideas? – iagdotme Nov 08 '12 at 14:44
  • Oops, it would help if I actually linked to the new jsFiddle- http://jsfiddle.net/iagdotme/tGNfS/ – iagdotme Nov 08 '12 at 14:49
  • For starters, it doesn't appear that you've included the jScrollPane CSS per http://jscrollpane.kelvinluck.com/#usage. – technoTarek Nov 08 '12 at 15:03
  • I thought I had- it's in the CSS frame (i.e. I haven't added it in the resources) – iagdotme Nov 08 '12 at 15:20
  • If you added the CSS, you'll either need to provide a new fiddle link or save the current version as your base. The fiddle above still doesn't include the appropriate CSS (http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css). – technoTarek Nov 08 '12 at 15:30
  • Aggh, sorry- having connection problems. This fiddle should work- http://jsfiddle.net/iagdotme/tGNfS/2/ – iagdotme Nov 08 '12 at 15:48
  • Listen, you've got too much going on here. Try debugging from the bottom up. Start by making sure you can get jScrollPane working (e.g., http://jsfiddle.net/technotarek/m7eKD/), then start incrementally adding in your additional features until you identify exactly where and when the problems start to occur. You'll save yourself a lot of grays hairs by using this approach... – technoTarek Nov 08 '12 at 15:52
1

Take a look at my answer at this post (Parallax sidebar scrolling) which reproduces the sidebar scrolling behavior you see used on readwrite.com.

Community
  • 1
  • 1
Matt Borja
  • 1,509
  • 1
  • 17
  • 38
  • Thanks for this- looks like a great solution! Really excited about giving it a whirl. I did sort out my problem although it took some time and it's not perfect but do have a look and let me know. My website is http://iag.me/ - the menu effect is on the article pages- so just click on one of them. Thanks again! – iagdotme Mar 02 '13 at 19:36