Show the sidebar toggle buttons with a pop-up when you scroll up

[choldgraf]

Context

We've been discussing the proper UI/UX to use for making the sidebar toggle buttons accessible from anywhere on the page:

• What is the best UI/UX to make the sidebar toggle buttons accessible as you scroll down? #800

However, we haven't yet converged on a pattern that doesn't feel intrusive or awkward.

One common pattern is to have a little "pop up" that occurs when people scroll upwards on mobile. For example, here's a pop-up for Furo:

Proposal

We should try implementing a similar pop-up that shows the article-header w/ the sidebar toggles when people scroll upwards after they've scrolled down by a certain amount on the page. This could be implemented by either:

• Making the article-header change its behavior when on mobile and when scrolled down enough, so that it is fixed position and hidden
• Adding a second article header UI element that is hidden by default, and only becomes active on mobile + scrolled down (so effectively the two headers trade off, when one is activated the other is deactivated / hidden).

We could probably implement this by plugging into the scroll event and adding a function that checks whether the person has scrolled up. That could add a class to our body document that we can use to trigger different kinds of behavior.

[12rambau]

I like the idea of a "back to top" popup but I'm not a big fan of having the sidebar button in it. It's quite unnatural to me to scroll up to make a header appear. In your example from furo, the "edit this page" button that is part of the article header is not in the popup

[drammock]

I've seen mobile sites / apps where the entire header disappears after a bit of down-scrolling, then the entire header re-appears when up-scrolling. So the general behavior is familiar to me. I'm not actually a fan of "back to top" though (on long pages the fast scrolling makes me dizzy) --- I'd prefer if a bit of up-scrolling would just make all the relevant buttons reappear.