Scroll-dependent header hiding/showing/docking #8268

Open
ericlindley-g opened this Issue Mar 20, 2017 · 10 comments

Comments

@ericlindley-g
Collaborator

ericlindley-g commented Mar 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@jpettitt

jpettitt Mar 21, 2017

Collaborator

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)

Collaborator

jpettitt commented Mar 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Mar 21, 2017

Collaborator

@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)

Collaborator

ericlindley-g commented Mar 21, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Mar 21, 2017

Member

@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)

Member

aghassemi commented Mar 21, 2017

@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)

@ericlindley-g ericlindley-g added this to Sprint (candidate) in UI Mar 24, 2017

@ericlindley-g ericlindley-g moved this from Sprint (candidate) to Backlog (shortlist) in UI Mar 24, 2017

@asadkn

This comment has been minimized.

Show comment
Hide comment
@asadkn

asadkn 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/

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

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Apr 3, 2017

Collaborator

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

Collaborator

ericlindley-g commented Apr 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi Apr 3, 2017

Member

#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.

Member

aghassemi commented Apr 3, 2017

#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.

@ericlindley-g ericlindley-g moved this from Backlog (shortlist) to Sprint (candidate) in UI May 12, 2017

@SchnWalter

This comment has been minimized.

Show comment
Hide comment
@SchnWalter

SchnWalter Jun 27, 2017

Contributor

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!

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!

@ericlindley-g ericlindley-g moved this from Sprint (candidate) to Backlog in UI Jan 5, 2018

@ericlindley-g ericlindley-g moved this from Backlog to Content ecosystem in UI Jan 5, 2018

@RS-David

This comment has been minimized.

Show comment
Hide comment
@RS-David

RS-David May 22, 2018

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.

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 comment has been minimized.

Show comment
Hide comment
@cvializ

cvializ May 22, 2018

Collaborator

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.

Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@aghassemi

aghassemi May 22, 2018

Member

@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)

Member

aghassemi commented May 22, 2018

@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)

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