Sticky positioning for a smoother scrolling experience

[iseulde]

Let's consider using sticky positioning to do the scrolling effect we currently have on the editor page. At the moment we use JS and listen to scroll events, which is not ideal. It may look slow and buggy under some circumstances.

Browser support is looking good. It's already implemented in Firefox and Safari, and by the time we ship 4.8 it will be in Chrome (est. 31 Jan). It's under consideration for Edge and there's no support in IE. This is no big deal though, as we can just fall back to what we currently have.

​http://caniuse.com/#feat=css-sticky

Note: Firefox now also gives a warning in the console about using JS for this:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see ​https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

[iseulde]

Proof of concept with the top toolbars above.

[iseulde]

Patch for both top and bottom editor toolbars. Let's see if we can do this for the sidebar as well.

[iseulde]

I added a buffer space of 100px between the end of the editor and the toolbar so that it doesn't stick all the way until the end.

There is one problem left with this patch though. Since there are two toolbars, they won't start hiding at the same time. We can fix this problem in JS by recalculating the editor toolbar when it changes in height, but ideally, both toolbars should be in a shared container...