4

I'm working with bootstrap 3 (current version).

I'm trying to create a navigation using the affix-PlugIn. I expect that as long as I'm ABOVE a specific navigation link, then the class of the link is "affix-top" and when I scroll down BELOW this specific link, then the class should change to "affix-bottom".

But: The "affix-bottom"-Class does not appear.

Here are the facts:

-> I have a very long sidebar navigation.

-> Every sidebar-hyperlink links to a different section on a page.

-> I added data-spy="affix" data-offset-top="60" data-offset-bottom="200" to all of the <li>-Elements.

Now, when I scroll down and inspect all the navigation-links with Chrome or firefox I can see that when I scroll down to a specific link, the affix.js-plugin changes the "class"-attribute from class="affix-top" to class="affix" (which is exactly what I expect).

BUT:

When I scroll down FURTHER, then the class-Attributes don't change to class="affix-bottom".

-

What am I doing wrong?

Or is this a bug in Bootstrap?

Mike Causer
  • 8,196
  • 2
  • 43
  • 63
Manny_user3297459
  • 519
  • 6
  • 13
  • Are you using react, angular, or any other technology that will manipulate the DOM? If so, make sure you instantiate the affix plugin via javascript *after* the DOM has been fully rendered. – tocqueville Jul 10 '17 at 16:39

1 Answers1

1

You need to add: data-spy="affix" data-offset-top="60" data-offset-bottom="200" only to your nav parent DOM element, for example ul or ol.

data-offset-bottom is the offset from the bottom of the page, so maybe 200 is too small and the nav element doesn't scroll down to that height.

To trigger the event, try to increment that parameter.

Matteo Guarnerio
  • 720
  • 2
  • 9
  • 26
  • 2
    No luck on my side. Whatever value I put in `data-offset-bottom`, the `affix-bottom` is never applied. – CedX Jun 22 '15 at 13:16