How to build a header nav w/the following features

HTML & CSS
1

I need to build a fixed header nav from scratch that has the following features -

Opacity can change once (for single scroll page) the first content pane scrolls up and out of view

Header height can change once the the first content page scrolls out of view.

This is a common feature found in many WordPress themes but don’t want to rely on themes.

Not sure where to start. The Skrollr.js lib can probably achieve this and i’m learning it now but this lib hasn’t been updated since 2014?

Anyone got any advice on this?, thanks

2

This sounds like a fairly complex order being placed. I advise that you hire a suitable contractor.

Our charge is to assist people who are having difficulties with their code. We are not a free resource to fill orders.

3

Hi, can you provide a link to an example?

4

I’ve made an example available at https://codepen.io/sensiblypowerful/full/qpKLvO
The basic idea is to compare window.scrollY against window.innerHeight, and to use a ‘after-first-page’ class that’s applied to #nav when appropriate. For a nice animation, just use a CSS transition.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.