[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
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

Closed
ericlindley-g opened this issue Mar 20, 2017 · 11 comments
Closed

Scroll-dependent header hiding/showing/docking #8268

ericlindley-g opened this issue Mar 20, 2017 · 11 comments

Comments

@ericlindley-g
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor Author

@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
Copy link
Contributor

@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
Copy link
asadkn commented Apr 3, 2017

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
Copy link
Contributor Author

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
Copy link
Contributor

#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
Copy link
Contributor
SchnWalter commented Jun 27, 2017

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
Copy link

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
Copy link
Contributor
cvializ commented May 22, 2018

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
Copy link
Contributor

@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
Copy link
Contributor

The new amp-fx-float-in-* handles the reset of this FR. #20881

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants