Archived topic
Replacing the jQuery sticky menu with one that uses CSS?
3 replies · Started by NrH on March 4, 2020
Hi
Is it possible to replace the jQuery-based sticky nav menu with one based on CSS instead? Given as this seems like a pretty trivial fix and it'd eliminate the need for jQuery in GP altogether, if it's possible to just specify the nav-height in CSS and with a few lines of JS specify upon scroll to transition the height to a different value and assign position:sticky to the element?
Feels very trivial but I don't what to alter the GP files and accidentally break something. Is there a reason why the sticky navs still rely on jQuery instead of CSS which could achieve the same thing in a much more effective way?
Thank you!
Hi there,
CSS won't be able to achieve the transition options we offer.
If you aren't using the transition effect then we can probably make CSS work.
Any chance you can link us to the site in question?
Thanks :)
Hi!
I can only choose between two different transitions and I can see a way of making both of them work with CSS? Maybe I'm missing a few transitions on my end but I can choose between Fade and Slide
For Fade the CSS-value can just be opacity 0 and transition to 1 upon scroll? For slide position can be Fixed and Top at 0, translate Y to -100% and then transition it to 0?
A combination of CSS and VanillaJS can emulate these transitions and there'd be no need for jQuery. Maybe I'm missing something as it seems very possible to me?
Thank you! :)
Hi there,
It's not that easy, unfortunately. It's something I would like to get moved over to vanilla JS this year, though. There are a lot of factors that go into it, so the javascript becomes quite complex.
If you don't need a transition, using position: sticky is the way to go. It's pure CSS, and it's super lightweight.
