3

I have a header with position:fixed and inside it I have a logo. The header gets added a class "small" on scroll and changes the logo from a large image to small image and uses CSS3 transitions to have a smooth transition.

  $(document).on("scroll",function(){
        if($(document).scrollTop()>70){ 
            $("header").removeClass("large").addClass("small");
            }
        else{
            $("header").removeClass("small").addClass("large");
            }
        });

This works fine in all browsers on desktop. The issue I am running into is on iOS using Safari or Chrome, when I scroll, the animation only happens after the finger is released, making an ugly user experience. Is there a way to detect a scroll gesture so that when the viewport is scrolled, it animates based on the speed?

James
  • 115
  • 2
  • 14

2 Answers2

2

Bind to the event "touchmove". Please note that DOM updates happening during scrolling are unreliable. For example I can append text to a div, but not prepend. I can append img tags to a div, but not update the src of an existing image element. (When I say can't - I mean I can, but the change isn't painted until after scrolling is over. When I say "I can" I mean the changes get painted immediatly)

Josh Ribakoff
  • 2,948
  • 3
  • 27
  • 26
1

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.

Source

EDIT: Check Josh Ribakoff's comment and answer to get more info about this statement

So, to answer your question, no! There's no way to do that.. yet!

EDIT: Anyway someone found a way to do that. Take a look. With a JS that "fakes" the native scroll you can perform what you need without any compromise.

Community
  • 1
  • 1
Kevin Cittadini
  • 1,449
  • 1
  • 21
  • 30
  • That's a really awesome job they did making that. – James Dec 02 '13 at 05:06
  • With all due respect, that's wrong. Your source doesn't state a source, and I can definitely manipulate the DOM as part of "touchmove" event, and append text to a div. I can even append image tags to a div and they load while I'm still touching the screen. – Josh Ribakoff May 06 '14 at 00:44
  • "my source" is jQuery site, so they aren't really newcomers. Anyway months have passed. Updates may have fixed this luckily. This answer was given 6 months ago – Kevin Cittadini May 06 '14 at 07:53
  • 1
    What their page states is a simplification of the issue. You can manipulate the DOM, but only sometimes. For example if a DOM update triggers a CSS transition, that transition will pause while you are scrolling. Updating the attribute of an existing DOM element is queued, while appending new DOM elements isn't (depending on the CSS affecting the appended DOM elements). In summary, its very unreliable to update the DOM, but some updates work, sometimes. – Josh Ribakoff May 08 '14 at 23:06
  • Whether that sentence is simplified or not, whether some transitions are paused before being "drawn" or not, that statement is not "wrong". All you can say is about it is that it's "not accurate". Anyway Thanks for the details, I'm sure lot of designers like me will find this very intersting and accurate :) I've added your infos it in my answer too (quoting). – Kevin Cittadini May 09 '14 at 09:23