-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scroll-dependent header hiding/showing/docking #8268
Comments
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) |
@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) |
@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) |
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/ |
Thanks for the feedback, @asadkn — I think the more general scrollbound amp-animation feature could be used to support this. @aghassemi , is that right? |
#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. |
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. |
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. |
@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) |
The new |
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
The text was updated successfully, but these errors were encountered: