javascript - Bootstrap Sidebar Scrolling, Affix & Scrollspy - Stack Overflow

admin管理员组

文章数量:1202371

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 -> .3.2/components.html

The website is (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.

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.

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow edited Oct 21, 2013 at 14:50 Trevor 16.1k99 gold badges5555 silver badges8585 bronze badges asked Oct 20, 2013 at 19:55 KitkatnikKitkatnik 36311 gold badge22 silver badges99 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 17

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">

本文标签： javascriptBootstrap Sidebar ScrollingAffix amp ScrollspyStack Overflow