Food info layout (CSS sticky positioning)

CSS position: sticky is now widely supported and, even in cases when it isn't, the page layout doesn't degrade but remains static, so we decided to experiment with this new metaphor.

While users can naturally scroll the detailed micro and macro nutrients tables to the right, the main info and basic macro nutrient stats stay sticky to the right.

I've attached a video of how this works in production.

kapture_2017-08-25_at_12.17.55_1_.mp4
6 MB
Download

More by spacefarm

View profile