search

inorganik / angular-scroll-spy

A simple, lightweight scroll-spy directive for angular that was built from scratch.
http://inorganik.github.io/angular-scroll-spy/
MIT License
17 stars 10 forks source link

Conflict with Bootstrap 4 CSS #6

Open MikeFB2764 opened 5 years ago

MikeFB2764 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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>