How to create a floating header

[simon.wong]

Hi,

I’m trying to configure a floating header that only shows up when the page has scrolled beyond the original in page header. I have been experimenting with different conditions but none seems to achieve the effect.

Here’s an example of what I’m talking about: https://www.screencast.com/t/2CijU4ArgXz7

Does anyone here ever tried to create something like this? If so, any advice would be great!

Thanks,
FundKernel Development

[boston85719]

if your non-floating header is 60px in height, when the page scrolling position is 60 you should show the floater header

[simon.wong]

Thanks @boston85719. Where would I configure that? Is it part of a “Condition” for the floating header?

[boston85719]

Might need to tweak it a bit to get the look just right when on the page, and ensure your header never expands its height from lack of responsive design.

I’ve done it before and it can look pretty seamless but can’t remember off hand if I used the same exact scrolling position as the header height or not.

[simon.wong]

Hi @boston85719.

It is working beautifully!

Thank you!

FundKernel Development