Waypoints not working with with Bootstrap3 classes?

Question

I'm having problems having the waypoints.js plugin work correctly with bootstrap3.

Here is a page with the absolute default barebone bootstrap boilerplate and the navbar code pasted into it. I just applied some very basic styling to the "stuck" class to see when it kicks in, making it red and stuck to the top of the viewport. Waypoints applies the "stuck" class to the .test element on page load instead of when scrolling.

http://garbage.altervista.org/bower_components/withbootstrapnav.html

I know my snippet of javascript code is correct, because it works on other elements than the bootstrap divs. Below is the exact same file as above, only difference is that the bootstrap navbar is replaced by a generic div. It works just as expected.

http://garbage.altervista.org/bower_components/withoutbootstrapnav.html

I can't figure out why waypoints doesn't work properly in my first example, but the solution might be right in front on me, anyone?

Thanks!

Answer 1

On your example with the Bootstrap navigation, that navigation is at the top of the page. There is no room to scroll, you've already hit it on page load. In your non-bootstrap example your h2 element has some margin that causes the navigation element to be ~20px from the top of the page, and you're able to see both states.