Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Sidebar Scrolling, Affix & Scrollspy

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.

like image 904
Kitkatnik Avatar asked Oct 20 '13 19:10

Kitkatnik


2 Answers

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.

like image 191
Kitkatnik Avatar answered Oct 17 '22 08:10

Kitkatnik


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">
like image 40
ritesh Avatar answered Oct 17 '22 08:10

ritesh