CODEWITHSUNDEEP
cssmobile-safari
Felix
Felix

Reputation: 852

iOS safari update element while scrolling

I want to get the similar behavior for my header in HTML page as in ios google chrome's header: when user start to scroll to the top (from any place of the page) of the page header appears as if it was sitting just above. And when user is scrolling to the bottom - the header just keeps it's position and slides up.

I added a 'touchmove' event to capture scroll coordinates, and can log it in some div just to check if it is working and seems like it's working fine, except for header's position is not updating while scrolling. Once scroll has stopped header's position updated as expected.

So my question: is it possible to update an element while user is scrolling?

I would prefer to not change to scrolling the content of the element (instead of scrolling the page itself).

Seems like no workaround, from Jquery.mobile page:

Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts.

Upvotes: 0

Views: 2071

Answers (1)

itsMeAra
itsMeAra

Reputation: 156

Do you by any chance have some code we can look at?

Although, if you're using jQuery, check out this plugin: http://wicky.nillia.ms/headroom.js/

It provides the functionality you are looking for.

Upvotes: 1

Related Questions