CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapscrollspy
Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

Scrollspy doesn't change until you get to the bottom

I am working on a twitter bootstrap scrollspy navigation. Than navigation bar and everything works except one small bug the currently selected item doesn't change until you scroll to the bottom of the section. For an example of what I am talking about here is my demo page: http://pwbguild.com/test/demo.html

Scroll down the page, you'll notice it doesn't change to "About" until you get to the bottom of the section.

I know the issue is with "navbar-fixed-bottom" because if I change it to top "navbar-fixed-top" it seems to work perfectly.

Could anyone help me understand why this is changing at the bottom of the section and not the top of the section?

Upvotes: 0

Views: 973

Answers (1)

Georg
Georg

Reputation: 498

I assume you want the Scrollspy to apply as soon as a section comes into the viewport. I suggest you to use the data-offset-tag and set it to the viewport height. Just add the following to you body-tag (which is the element you spy on):

data-offset="$(window).height();"

Your body opening tag then should look like this:

<body data-spy="scroll" data-target="#navbar" data-offset="$(window).height();" style="zoom: 1;">

Upvotes: 1

Related Questions