Scrolling sidebar Bootstrap, Affix & Scrollspy

Question

NEWER

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

I am trying to scroll the sidebar, like here, → http://getbootstrap.com/2.3.2/components.html

Website http://www.katyasarmiento.zzl.org (currently a free hosting site)

---

OLDER

It’s very difficult for me to handle this. I searched for everything that I could, and I still can not understand. I got it to work for a while with a tutorial that I found, but that didn't work with ScrollSpy. Therefore, I am trying to use Bootstrap Affix.

I am new to javascript / jquery, so if someone can view my site and check what I am doing wrong.

ScrollSpy is working right now, I think I just can’t get the sidebar to scroll through the page.

Answer 1

ALRIGHT I got it for work!

What I did was change the following ...

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

For...

 <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 into the "bs-docs-sidenav" class, changed the script to this class, and not to the "bs-docs-sidebar" class.

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

My original problem was with the sidebar class instead of the sidenav class, because that is what my CSS affix worked on.

Hope this helps anyone who had the same problem, mine :)

What helped me with this, these tutorials .

Answer 2

In the ul element on your page, you wrote -

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

If you used the nav nav-list bs-docs-sidenav classes nav nav-list bs-docs-sidenav , add another affix-top class. Then it will be -

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

And remove the affix-top class 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 as -

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