Conflict with Bootstrap 4 CSS

[MikeFB2764]

I am working on implementing scroll-spy w/ countUp on a site that uses Bootstrap 4. CountUp without scroll-spy works fine. Scroll-spy will only work when the css for Bootstrap is omitted. I am thinking there is some conflict (somehow), but wanted to see if this was a known issue or something fairly straightforward to override.

[inorganik]

The CSS shouldn't affect this scroll-spy at all - however if you are including the JS from bootstrap, that would likely override the window.onscroll handler which this lib uses. So make sure you aren't using the bootstrap JS and it should work... let me know.

[MikeFB2764]

I will have to dig into this a little more. The Bootstrap.js library does not seem to have any impact. It's only when the Bootstrap.css file is present that scroll-spy does not work. I know this doesn't make sense, so there has to be something else that I'm missing.

[MikeFB2764]

I will have to dig into this a little more. The Bootstrap.js library does not seem to have any impact. It's only when the Bootstrap.css file is present that scroll-spy does not work. I know this doesn't make sense, so there has to be something else that I'm missing.

Getting a little closer....scroll-spy in a nested grid seems to be having some trouble. If I move the element outside of the nested grid it seems to work, but for some reason once it's in the sub-grid, no luck. Not sure what to make of this yet.

[MikeFB2764]

I will have to dig into this a little more. The Bootstrap.js library does not seem to have any impact. It's only when the Bootstrap.css file is present that scroll-spy does not work. I know this doesn't make sense, so there has to be something else that I'm missing.

Getting a little closer....scroll-spy in a nested grid seems to be having some trouble. If I move the element outside of the nested grid it seems to work, but for some reason once it's in the sub-grid, no luck. Not sure what to make of this yet.

Well...not sure if I am any closer, but the only way I can get it to work is to have an empty element preceding the element with the scroll-spy implemented. For example:

<h2></h2>
<h2 count-up id="person-count1" start-val="0" end-val="2536" duration="10" scroll-spy-event="elementScrolledIntoView" scroll-spy></h2>