search

harm-less / angular-sticky

Pure javascript AngularJS directive to make elements stick when scrolling
http://harm-less.github.io/angular-sticky
83 stars 38 forks source link

Support of position: sticky? #17

Open psaniko opened 8 years ago

psaniko commented 8 years ago

Are there any plans to support the upcoming specification of stickily positioned elements?

https://www.w3.org/TR/css-position-3/#sticky-pos

We realize this is quite early and not at all widely supported but we need smooth stickyness on iOS devices and are considering switching to fixed-sticky because of this. As this switch would come with a lot of drawbacks, we would like to know if such an implementation is on the horizon or even at all possible with the current approach.

harm-less commented 8 years ago

It seems like this plugin wouldn't even be necessary anymore in many situations :stuck_out_tongue: But in terms of performance it would definitely be handy as I can let the browser do the calculations. A drawback would be that the CSS might not be able to handle stacks.

Perhaps I can make it so the polyfill can hook into the plugin using a wrapper, but then it would be nice that the current engine is hook-able too because that will save file size. I guess I'm making it a bit too complex that way, but I'm just going out on a limb here :)

psaniko commented 8 years ago

Not sure if we can save filesize that way as position:fixed will need to be supported for several years, of course. Let us know any ideas regarding the implementation or plans on your side to implement it, we will probably tackle this issue soon and try to integrate it in angular-sticky.

harm-less commented 8 years ago

Next week I'm off from work and you triggered me with this request ;) So I might be able to address my long awaited attempt at refactoring the sticky engine. With this improvement the code will be much easier to handle and during this refactoring I'll keep your request I mind too.

I might also need to rely more on modernizr if I want to support both sticky methods, but we'll see. I'll keep you informed.

psaniko commented 8 years ago

That's good to know! We'll wait for potential progress then, no pressure :)

psaniko commented 8 years ago

@harm-less Any updates so far?

axelmichel commented 7 years ago

@harm-less @psaniko There might be a CSS based fix for the flickering of sticky elements on iOS. The combination of forcing hardware acceleration (by using 3D transform) and the usage of backface-visibility did the trick. Applying transform: translate3d(0,0,0); backface-visibility: hidden pushes the graphical processing unit (GPU), and the rendering will be done in a higher FPS rate. All tests (iOS 9,10, iPhone 5,6, iPad 1) had been successful. Downside of this - applying the transformation by script would override all existing transformations on that element and since all transformations are converted into a matrix, parsing and updating this property could be messy. Anyway, using these CSS-Rules will remove the flickering.