How to create a floating header

simon.wong · 2021-01-05T04:51:05.367Z

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 · 2021-01-05T05:14:24.163Z

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

simon.wong · 2021-01-05T16:35:43.088Z

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

boston85719 · 2021-01-05T16:39:38.117Z

Screen Shot 2021-01-05 at 11.37.52 PM

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 · 2021-01-05T17:48:59.746Z

Hi @boston85719.

It is working beautifully!

Thank you!

FundKernel Development

system · 2021-03-16T04:51:07.360Z

This topic was automatically closed after 70 days. New replies are no longer allowed.