CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kreilinger
kreilinger

Reputation: 111

Bootstrap 3 scrollspy not working

I'm currently working on the following site: http://strauss.co.at/sup/

I'd like to use bootstrap's scrollspy to keep track of the current menu item. i added the data-spy="scroll" and data-target="#navbar" to the body tag. #navbar is the container of the bootstrap nav component (this is what I found is in lots of different articles here on stackoverflow and other sites). still it does not work. what am I missing here?

Additionally, I'm using the affix plugin to make the menu sit on the top of the page after a specific offset. I can see a little jumping there. Is there any way to smooth this? should I do it with css 3 transitions or is it more of a content-element-that-gets-pulled-out-of-the-flow problem?

thanks

Upvotes: 0

Views: 565

Answers (2)

kreilinger
kreilinger

Reputation: 111

Thank's so much!

I just noticed that TYPO3 automatically added the path to the links. I didn't have it in my template.

I figured out that I can also solve this by adding the data-target="#id attribute to the link.

Upvotes: 0

user3495690
user3495690

Reputation: 576

You're really close! You just have to change the href on the anchor elements to the id of the element you want to link the scrollspy to.

For example, where you have:

<a href="/sup/#sup-in-der-physiotherapie">SUP in der Physiotherapie</a>

You should have:

<a href="#sup-in-der-physiotherapie">SUP in der Physiotherapie</a>

Note that simply changing this with inspect element won't work, whereas Bootstrap uses javascript when the DOM first loads to initiate the scrollspy.

Upvotes: 1

Related Questions