angular-ui / ui-scrollpoint

Add a 'ui-scrollpoint' class to elements when the page scrolls past them.
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-scrollpoint/master/demo/index.html
MIT License
28 stars 25 forks source link

Problem in small screens #18

Open Eduardo-Julio opened 7 years ago

Eduardo-Julio commented 7 years ago

Hi,

I have a fixed element inside a scrollable container, to make this work I had to put "ui-scrollpoint-target" in the container. This works great in a desktop.

The problem is, when the page is in a mobile screen size, the container no longer controls the scroll, now the body is controlling the scroll and the fixed element doesn't work, probably because is listening to the "ui-scrollpoint-target" of the container that is no longer controlling the scroll.

Any advice on this? Thanks!

plong0 commented 7 years ago

W3 standards state that fixed element position is relative to the viewport, not to a scrollable container. While you might find that it works on certain browsers, you should definitely not rely on it to be cross-compatible.

What I've done in the case of having an element "stick" to the top of a scrollable div is to set its position: absolute; and watch the scroll event on the scrollable div (potentially a ui-scrollpoint-target) to update the element's top value.

You probably could try the ui-scrollpoint-pin module. Last I recall it was working pretty nicely, but I ended up abandoning the project because I found it to be overkill and I wrote something more specialized into my ui framework.

Eduardo-Julio commented 7 years ago

Thanks for your help.

Yes, as I said, the sticky element is working with ui-scrollpoint-target, the problem is when that container is no longer controlling the scroll because the screen size is too small and the whole page/body starts controlling the scroll.

I haven't found something to explain how ui-scrollpoint-absolute works, maybe that can help?