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.
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.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With