Pinning a "Page header" Container to the top of a page in UI Builder

[Andy Smith2]

Hi Folks

I'm building an Overview page in UI Builder for our Store app. The app enables ServiceNow customers to build and execute runbooks on the platform.

The first thing on the Runbook page is a full width container that holds some key details of the runbook. I've called this the "Page Header panel". We than have multiple containers further down the "deep" page with less important information. 

Given that there's a lot of information to share about any given runbook, the user will need to scroll up and down the page to get to the information that they need. 

What I'm trying to do is to get the "Page Header panel" to be sticky i.e. always displayed at the top of the page when the user scrolls down to view lower page content. 

Does anyone know if this can be achieved? Any advice would be very much appreciated.

Many thanks

Andy

[Brad Tilton]

Edited: I stand corrected. Looks like Arnoud's response below should work.

[Andy Smith2]

Thanks for the feedback, Brad. This is very much a "nice-to-have" aspect of our scoped app .. so I'll be able to park it now and avoid investing further time and effort. 

Thank you

Andy

[Arnoud Kooi · Accepted solution]

A quick test it seems setting CSS position:fixed to the top container works.
Then add top padding to the container below, matching the height of the header to prevent overlap.

Set a high z-index and background color to make sure the header is always on top.

Not fully tested, but maybe worth a shot.

[Andy Smith2]

Sorry for the delay in responding, Brad & Arnoud. I missed the fact that you'd updated this post with your kind assistance (I'm blaming this on the migration to the new Community site which has thrown me a little but that's a poor excuse!).

Thank you very much for your assistance - I'll give it a go with our new app.

Regards

Andy