CSS – two headers – big and smaller sticky

CSS – two headers – big and smaller sticky

In modern web, you often see pages that have a big fancy header with a menu. It would be impractical to keep that menu visible all the time when scrolling because it would occupy too much of screen space. Therefore those pages often introduce a smaller header just with the navigation and logo that will be displayed as user scrolls down. I will show how to easily create such a header and add some animation to it.

Without animation

Let’s start with HTML. I’ll need two headers – the first one will be smaller and sticky, the second one will be bigger and scrolled away. I put simple menus to both.

HTML

I will skip styles that are not relevant to this solution. What is only important is to hide .sticky-header at the beginning and show it later by adding a .visible class with JavaScript.

CSS

And finally, JavaScript. After the page is loaded (line 1), I’ll have to subscribe to the scrolling event (line 14). Whenever user scrolls, but also immediately after the page is loaded, I will run the method that will add or remove the .visible class, depending on the current position (line 6). I assumed that this moment should occur at 70% of the height of the big header (line 3).

JS

Working example (scroll down to see the effect):

See the Pen Two headers – static by L (@lukaszmn) on CodePen.

Animation

Once I verified it’s working, I’ll animate the sticky header. I would like the header to slide down and appear.

Effect: Appear

Adding the appearance effect is fairly easy by changing the opacity. Just remember to replace display: block/none with opacity: 1/0:

CSS

Effect: Slide down

Adding the slide down effect for an element at the top of the page works by modifying its top margin:

  • from the value when it’s completely hidden (that would be equal to minus the element’s height)
  • to the margin of 0 when the element is completely visible
CSS

Note: instead of margin-top: -60px and margin-top: 0 I could also use:

  • transform: translateY(-60px) and transform: translateY(0)
  • or even transform: translateY(-100%) for the first case

Transition

The default transition function (ease) does not give a pleasant visual effect. You can learn more about the few available functions in the documentation to transition-timing-function.

You can try replacing it with ease-in-out or changing the transition duration:
transition: 0.3s ease-in-out.

I still didn’t like it so I used Easing Functions collection to get a better one. I chose easeInOutCubic and decreased duration:

transition: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

Final version

I changed the previous static styles to include animations:

CSS

Working example (scroll down to see the effect):

See the Pen Two headers – animation by L (@lukaszmn) on CodePen.

Leave a Reply

avatar
  Subscribe  
Notify of