Problem in small screens

[Eduardo-Julio]

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]

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]

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?