{"action":"created","issue":{"url":"https://api.github.com/repos/captivationsoftware/react-sticky/issues/11","labels_url":"https://api.github.com/repos/captivationsoftware/react-sticky/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/captivationsoftware/react-sticky/issues/11/comments","events_url":"https://api.github.com/repos/captivationsoftware/react-sticky/issues/11/events","html_url":"https://github.com/captivationsoftware/react-sticky/pull/11","id":85565573,"number":11,"title":"switch from handleEvent to rAF loop","user":{"login":"legomushroom","id":1478800,"avatar_url":"https://avatars.githubusercontent.com/u/1478800?v=3","gravatar_id":"","url":"https://api.github.com/users/legomushroom","html_url":"https://github.com/legomushroom","followers_url":"https://api.github.com/users/legomushroom/followers","following_url":"https://api.github.com/users/legomushroom/following{/other_user}","gists_url":"https://api.github.com/users/legomushroom/gists{/gist_id}","starred_url":"https://api.github.com/users/legomushroom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/legomushroom/subscriptions","organizations_url":"https://api.github.com/users/legomushroom/orgs","repos_url":"https://api.github.com/users/legomushroom/repos","events_url":"https://api.github.com/users/legomushroom/events{/privacy}","received_events_url":"https://api.github.com/users/legomushroom/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-06-05T15:54:32Z","updated_at":"2015-06-12T12:44:33Z","closed_at":"2015-06-12T12:27:12Z","pull_request":{"url":"https://api.github.com/repos/captivationsoftware/react-sticky/pulls/11","html_url":"https://github.com/captivationsoftware/react-sticky/pull/11","diff_url":"https://github.com/captivationsoftware/react-sticky/pull/11.diff","patch_url":"https://github.com/captivationsoftware/react-sticky/pull/11.patch"},"body":"Hey guys! Thanks for the component!\r\n\r\nThere is the issue I stumbled upon: [video in mov format](http://monosnap.com/file/0MzTUixmuttii7aLYIlhZJMMaRrQDT)\r\n\r\n *When scrolling too fast, component remains sticked until the next scroll event(or one of the 3 that will run handleEvent method).*\r\n\r\nSo what I did:\r\n- Switched to requestAnimationFrame loop to check state of component in loop every 16ms. This checks the state exactly when browser is about to render a frame, so it is much more robust approach to rely on (scroll event can fire in a half a frame or fire not often causing flickering etc).\r\nThe rAF loop also adds legacy iOS support since scroll fires only on the start and the end of actual scroll process in iOS < 8 versions (http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/).\r\n- Since it will always run the loop I did optimisations for it (it costs about `0.15ms` without optimisations):\r\n  - it caches the previous `pageYOffset` value and returns from the loop immediately if nothing changed. It decreases loop cost overhead to about `0.1ms - 0.08ms`.\r\n  - if nothing changes for 500ms - stop the loop and sleep until any of `'load', 'scroll', 'resize'` events fires. It decreases loop cost overhead to about `0ms`.\r\n- Also added `pageY = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);` for IE8 support since `React` do support it.\r\n\r\nThis approach is much more robust with no (or even with better) performance overhead but relies on [requestAnimationFrame polyfill](https://github.com/darius/requestAnimationFrame) for legacy browsers. If you are using an animation library it is probably polyfilled already. I didnt include the polyfill to the component in this PR.\r\n\r\nP.S.    This is video after the changes maybe it will help to convince you to merge the PR: [video in mov format](http://take.ms/UbDT8)\r\nP.P.S  I forgot to bump the component's version, sorry about that\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/captivationsoftware/react-sticky/issues/comments/111478786","html_url":"https://github.com/captivationsoftware/react-sticky/pull/11#issuecomment-111478786","issue_url":"https://api.github.com/repos/captivationsoftware/react-sticky/issues/11","id":111478786,"user":{"login":"captivationsoftware","id":8461584,"avatar_url":"https://avatars.githubusercontent.com/u/8461584?v=3","gravatar_id":"","url":"https://api.github.com/users/captivationsoftware","html_url":"https://github.com/captivationsoftware","followers_url":"https://api.github.com/users/captivationsoftware/followers","following_url":"https://api.github.com/users/captivationsoftware/following{/other_user}","gists_url":"https://api.github.com/users/captivationsoftware/gists{/gist_id}","starred_url":"https://api.github.com/users/captivationsoftware/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/captivationsoftware/subscriptions","organizations_url":"https://api.github.com/users/captivationsoftware/orgs","repos_url":"https://api.github.com/users/captivationsoftware/repos","events_url":"https://api.github.com/users/captivationsoftware/events{/privacy}","received_events_url":"https://api.github.com/users/captivationsoftware/received_events","type":"User","site_admin":false},"created_at":"2015-06-12T12:44:33Z","updated_at":"2015-06-12T12:44:33Z","body":"Glad to hear that this worked well too. And I'm currently working on that initialize issue as well. But good call!\r\n\r\nSeriously though: great feedback, and your code was incredibly thorough and well documented - nice work!"}}