Amphtml: Scroll-dependent header hiding/showing/docking

[ericlindley-g]

Tracking issue for general scroll-dependent header behaviors as a scoped version of the general scroll-bound CSS feature.

Feature 1: Header hides/shows as user scrolls down/up

Feature 2: Inline sub-heading for page section docks to header when it is scrolled to the top of the viewport, and sticks there until user scrolls back up, or is replaced by another docking/sticky header, or is removed (user scrolls below relevant section)

/cc @aghassemi @cvializ

[jpettitt]

Will this include unidirectional triggers? IE when you scroll down the page no header but if you start to scroll back up the header appears? (the theory being that if you're going back up there is a higher probability you want the nav)

[ericlindley-g]

@jpettitt — Yep! The plan right now for feature 1 above is to support a behavior where the header gets out of the way when the user wants to consume the primary page content (when the user scrolls down), and comes back when the user's intent is more ambiguous, and may want navigation affordances (when the user scrolls back up)

[aghassemi]

@jpettitt I am imagining "feature 1" to pretty much mimic current AMP viewer header behavior (with a default animation curve that matches AMP viewer as well)

[asadkn]

It would be great if this was more generic and could be applied to other elements like a fixed "back to top" that becomes visible only at certain top / bottom position.

Google itself had a back to top button recently: http://www.thesempost.com/google-testing-back-to-top-mobile-search-results/

[ericlindley-g]

Thanks for the feedback, @asadkn — I think the more general scrollbound amp-animation feature could be used to support this. @aghassemi , is that right?

[aghassemi]

8411 should cover "back to top" (using a marker somewhere in the page to act as the trigger upon visibility). I will add it to the list of use-case to verify.

[SchnWalter]

I agree with @asadkn, a generic version of Feature 2 would be great. And it would also be useful for a "docking" desktop sidebar ad, and people would like to pair this with AMP Ad refresh (#9535).

EDIT: I just read the "scroll-bound amp-animation" ticket, that looks nice, thanks!

[CrystalDave]

Is the "Feature 1" version of this still planned, or did it get rolled into "scroll-bound amp-animation" (or some other shelved outcome)?

I think I might be able to replicate something of a basic scroll/hide fixed header, but given how common it seems to be as a design pattern I'd love to be able to use something relatively standardized.

[cvializ]

This feature is implemented, but we haven't made a simple demo example for it yet. An example site using it is AliExpress on their mobile product page. Make sure you view it on a mobile device or the DevTools mobile view.

[aghassemi]

@RS-David Another similar sample here: https://codepen.io/aghassemi/pen/GOEWEz (it does shrink/expand instead of hide/show but the fundamentals are the same)

[aghassemi]

The new amp-fx-float-in-* handles the reset of this FR. https://github.com/ampproject/amphtml/issues/20881