The problem with sticky menus that appear on scroll and what to do instead

I’ve previously written about the problems with regular sticky menus.

In response to those issues, some people suggest showing and hiding the menu as the user scrolls up and down.

Bondir’s sticky menu appears and disappears as the user scrolls

This seems smart because:

  • the menu gets out of the way to allow users to focus on the content
  • it allows users to access the menu without having to scroll back to the top

But this approach is worse than regular sticky menus.

Here’s why:

Problem #1: They’re distracting

This is because as the user scrolls the content to fit in the viewport, the menu will suddenly appear.

Good design doesn’t guess (wrongly) about what users need.

Problem #2: They’re hard to control

This is because scrolling up too much reveals the menu when it’s not wanted. And scrolling down a bit by accident will hide it when it is wanted.

Good design doesn’t take control away.

Problem #3: They cause dizziness and nausea

This is because animation can cause dizziness, nausea, headaches and more.

Good design avoids physical stress.

Problem #4: They can impact performance

This is because JavaScript is needed to react to the scroll event which can drain the battery and degrade performance especially on low-powered devices.

Good design is lightweight.

What to do instead

  1. Keep pages short: Sticky menus are a symptom of long pages so fix the root cause.
  2. Just let users scroll: It’s a myth that scrolling is a problem. Even on mobile, the top of the page is a flick or 2 away mostly.
  3. Put relevant links in context: For example, add a subscribe form to the end of a post or add a CTA to a pricing section.
  4. Use a back-to-top link: They’re relatively unobtrusive (but only do this once you exhaust the other options).