I believe you'd describe it as a pattern. What is the name of the pattern when you scroll down and the action bar hides to show more space and reveals when you scroll back up. Thanks.

  • I believe it's called scrolling :) – Vitaly Mijiritsky Jul 15 '15 at 17:31
  • Interesting question. Can you be more specific about what do you have in mind? Do you want ANY amount of up-scrolling to cause the header to grow, or does it only grow once the scrolling reaches the very top of the page? And on down-scrolling, does the header disappear entirely, or does part of it remain at the top of the screen, with the page sliding below it? – JeromeR Jul 16 '15 at 6:06

This sounds like an example of progressive disclosure in interaction design for mobile.

| improve this answer | |
  • I don't think that's what occur means. He means something not requested by the user. The pattern he describes serves a natural flow, for instance, a interface in which the user scrolls down to view list items and tries to scroll up to find filters and as he does that, the header reveals them. – JotaRMonteiro Jul 15 '15 at 17:47
  • 1
    You're saying that the user has to request the disclosure by directly interacting with the object. My definition of progressive disclosure is less about the directness of the interaction and more about the appearance or disappearance of something. In the @Joel-Garfield example, the scrolling represents the user's "request". – JeromeR Jul 16 '15 at 6:01

I doubt if there's a specific name for this pattern. As far as iOS is concerned, it was achieved using the viewport meta tag known as minimal-ui. The minimal-ui viewport was supported till iOS 7.1 and was removed in iOS 8. Although, the minimal-ui is not gone. It still works when you scroll down.

| improve this answer | |
  • Minimal UI is an HTML meta tag. On iOS it didn't shrink site content when scrolling, it hid the mobile browser UI entirely so HTML5 websites & web-apps on mobile Safari could effectively be full-screen to mimic native apps. It displays Safari browser controls when you tap, so scrolling isn't relevant. With iOS8+, apps can now adjust the Navigation Bar to hide on scroll, tap, swipe, etc. Regardless, I think the question is about the common pattern of shrinking the height of a fixed header area as you scroll down a website. – mc01 Jul 15 '15 at 21:54

I see it called an "Animated Sticky Header/Footer" or an "Animated Resizing Header/Footer." A "sticky header/footer" by itself remains in place regardless of scrolling. If it changes shape when scrolled past a certain point, it's "animated" or "resizing."

The top-most header elements in a site (the title, logo, nav, etc) are initially displayed within a vertically taller section at the top of the site. Rather than scroll entirely out of view, they remain visible at the top of the page, shrinking to a smaller vertical height, with links & logos shrinking as well or perhaps being hidden behind a "hamburger" menu. This is common behavior for many Wordpress themes & responsive sites that want to keep nav/header elements accessible on mobile devices.



| improve this answer | |
  • Thanks for the links, @mc01. I spent a bit of time reading and looking, and I think I have a use for that. I've already emailed the Dev on a current project, asking for a review of the code samples. :) – JeromeR Jul 16 '15 at 6:08

I've implemented these a few times. I haven't come across a standard name for them.

  • If you are doing a search (eg looking for plug-ins or implementation tips) you can use the term scroll up menu in Google and you'll be well on your way.

  • If you are looking for a naming convention (e.g. for CSS or JS work) I found the name scroll up menu quite long and unwieldy in practice so I've used the name upscroller in code before.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.