Support » Plugin: Sticky Menu (or Anything!) on Scroll » “Is it possible to add some styles to the element but only when it’s sticky?”

  • I’m using Astra / Beaver Builder.

    I want my header to show a different style when the page is scrolled down.

    Per the instructions on the FAQ page, I added these rules to my CSS:

    .element-is-not-sticky a
    {
    color: green!important;
    }

    .element-is-sticky a
    {
    color: red!important;
    }

    However, the “element-is-not-sticky” class is never being applied to the header. The header always has “element-is-sticky” even before the page has been scrolled.

    I tried Legacy Mode but that didn’t fix the issue, nor did enabling Dynamic Mode. In those cases the JavaScript was continuously applying “visibility: hidden;” to the “sticky-element-original” element. So my guess is that the plugin thinks that the page has been scrolled down regardless of its actual position.

    I’ve enabled Debug Mode in case it helps.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Senff

    (@senff)

    Hi, thanks for trying my plugin.

    The reason why it’s not changing colors, is because your element is always sticky.
    My plugin makes an element stick when it reaches the top of the page.

    Since your header is already at the top of the page on page load, it will be sticky right away as well.

    You might want to try adding this to your CSS code:

    #masthead {
       margin-top: 1px;
    }

    That way, your header will be 1 pixel from the top of the screen. Then once you start scrolling, it will get sticky right away, and the colors should change.

    Hi Mark, thanks for the help!

    That rule does seem to fix the “element-is-not-sticky” problem, however it also seems to cause two new issues:

    1. The header now stutters a bit when you first scroll down.

    2. Because the sticky header has 1px less of top margin than the not-sticky header, the contents of the header shift by 1px when the change occurs.

    I was able to fix the second problem by changing the rule to:

    #masthead {
       margin-top: .1px;
    }

    However the first issue still occurs. It’s awfully jarring compared to how smooth the sticky header normally is. Is there any way to get rid of that?

    Plugin Author Senff

    (@senff)

    The first time is often a bit “jerky”, as the script needs to calculate and detect the point where the header should become sticky. I’m afraid that’s just part of the way the script works (and the delay it causes) at the moment.

    I’ll look into it along the way to see if there’s anything to improve that, but I can’t give a timeline for that I’m afraid.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘“Is it possible to add some styles to the element but only when it’s sticky?”’ is closed to new replies.