Bootstrap Sidebar Scrolling, Affix & Scrollspy

Question

NEWER

So the scrolling is working now... But it's fixed to the top of the page. I need it to be in the correct position (next to the content) and then start scrolling with at it's current position with the content.

I'm trying to get my sidebar to scroll like this one here -> http://getbootstrap.com/2.3.2/components.html

The website is http://www.katyasarmiento.zzl.org (a free hosted site for now)

---

OLDER

I'm having a really hard time with this. I've looked up everything I could and I still can't figure it out. I got it to work for a while with a tutorial I found, but it didn't work well with ScrollSpy. So I'm trying to use Bootstrap's Affix.

I'm new to javascript / jquery so if anyone could look over my website and check to see what I'm doing wrong.

The ScrollSpy is working right now I think, I just can't get the sidebar to scroll with the page.

Answer 1

ALRIGHT I got it to work!

What I did was change the following...

<div class="bs-docs-sidebar span3">
    <ul class="nav nav-list bs-docs-sidenav affix-top">

To...

<div class="bs-docs-sidebar span3">
    <ul class="nav nav-list bs-docs-sidenav affix" data-spy="affix" data-offset-top="255" data-offset-bottom="200">

So I put the data-spy and data-offset on the "bs-docs-sidenav" class, changed the script to that class also instead of the "bs-docs-sidebar" class.

Then I edited the css of "affix-top", "affix", and "affix-bottom" and it works very well :)

My original problem was referring to the sidebar class instead of the sidenav class, because that's what my affix CSS was working on.

Hope this helps anyone that was having a similar issue to mine :)

What helped me with this were these tutorials.

Answer 2

In ul element on your page you have written-

<ul class="nav nav-list bs-docs-sidenav">

Where you have used nav nav-list bs-docs-sidenav classes add one more class affix-top. Then it will be -

<ul class="nav nav-list bs-docs-sidenav affix-top">

And remove the class affix-top from this line, which is the parent node of your ul element-

<div class="bs-docs-sidebar span3 affix-top" data-offset-top="50" data-spy="affix">

And write this line like-

<div class="bs-docs-sidebar span3">