Navigation layout when scrolling down page

Hi all,

I’m trying to style the header on this site, which is based on the wonderful Customizr theme: https://cluster4.website-staging.uk/simplyfloors.co.uk/

I’m interested in how it functions when you scroll down the page and the sticky header takes effect (i.e. the short header).

I’ve added a new widget to the header, which contains the telephone number, and I’d like this to be visible even when scrolling down the page. I’ve applied @media clauses to position the widget when you’re at the top of the page, but this is causing it to be placed poorly when scrolling further down.

When part way down the page, I’d like to:

(1) Have the mobile (‘hamburger’) menu appear, regardless of screen size.
(2) Have the telephone number correctly placed in the header (level with the logo and mobile menu icon).

Any rules added should not affect the current layout when at the top of the page.

So question is, how can you add style rules that are conditional on the user’s browser being scrolled part way down the page? Presumably (though I don’t know for sure) it’s the same trigger that causes the menu to change when scrolling down?

This one has me well stumped, so I’d really appreciate your help.

Many thanks,
Max