[Support request] Replacing the jQuery sticky menu with one that uses CSS?

Home Forums Support Replacing the jQuery sticky menu with one that uses CSS?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1184625
    NrH

    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!

    #1184966
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1189732
    NrH

    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! πŸ™‚

    #1190206
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.