Header option: hide/show on scroll

[Araminta]

From old feedback: https://feedback.cwicly.com/boards/feature-requests/posts/header-option-hide-show-on-scroll

[Marius]

I think this will be a thing as soon as scrolling interactions will be introduced.
Did you think about a native integration of headroom or any other solution?
It brings some additional options which are pretty useful and scrolling interactions won’t be able to do (I guess).
So far I love how you brought several libraries to Cwicly - implementation wise.

Just curious, since the back to top button was also something I was expecting with the scroll interactions.

[Louis]

You’ve understood where we’re heading!
The interactions panel needs a rework (it just isn’t intuitive) before we include the scroll interactions.
We already have something built but this is where we see that if Cwicly wants to compete with other builders out there, it has to be previewable on the backend without requiring the user to save etc…

@Louis

When Cwicly provides a code block, it will have to be properly integrated. This is something that we want to make sure happens correctly, which is why before touching the code block, we want to improve the Interactions etc… to make them “interact-able” - if needed - on the backend

But yes, the hide/show header on scroll will likely be an option that you can toggle on/off within the advanced panel since users won’t want to have to create a specific interaction for this every-time.

Love headroom js, so definitely a nice option there.

[Marius]

Thanks for sharing your thoughts and giving some hints what potentially could be expected in the future, really appreciated

I also agree with the interaction panel.
A proper implementation, especially in terms of scrolling interactions, is important.
Quality first, so I’m happy to wait.

[Marius]

Flawless implementation @Louis, so amazing

A bonus could be, to enable the functionality to or from a specific px value (browser width) via block options.

For instance:

• Enable to a screen width of 800px maximum
• Enable from a screen width of 1200px minimum

Maybe there could be an input field to enter the px value and a toggle switch or dropdown to choose either to or from.

Resetting everything via RS would be , especially in case more styles are added, using scroll direction selectors + RS
It also would be limited to the 2 existing breakpoints and the from option.

Thanks again, this was so needed and will bring a lot of new possibilities

[kane]

Is there any documentation please?

[Marius]

It’s in the making and will arrive asap.
You can read here how it works in general but pay attention to Cwicly’s custom selectors which you can find in the scroll options area as well.

[Marius]

Added with v1.1.7.7:

@Louis

New: Scroll Direction added (possibility to hide/reveal header on scroll)

Tutorial / Walk-Through.