Page jumps when sticky bar appears

  • Resolved MountainSmoke

    (@mountainsmoke)


    6 years, 1 month ago

    Useful plugin, potentially. But… I’ve deactivated the plugin. Maybe will delete it, actually.

    It has nice features… but there’s a major problem:

    The page jumps when the sticky menu bar appears. So no matter how nice everything looks, and how many technical things are in place, the plugin is useless if the user experience is to always see a big jarring jump each time the menu bar changes state.

    Maybe I’m wrong, but I believe this a typical problem/solution. When the menu element becomes sticky, you’re changing it from position:relative to position:fixed (or something other than relative). This removes the bar from the relative page flow, thus jumping the page upwards, jarringly. On page load, you could get the original menu bar height in pixels, and when the menu bar changes state (e.g. becomes sticky) apply the pixel height to the pages’ top-padding or to some dummy spacer. In theory this way you cancel-out any page jumping.

    thx

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    Do you have an example of this happening?

    Thread Starter MountainSmoke

    (@mountainsmoke)

    Hey Robert,

    After more testing, I’ve narrowed it down…

    If I set a custom Header Background and Transparent Header is OFF, then the page jumps when you hit the transition point ie Scroll Distance (e.g. 300px).

    For reference, the element I’m trying to make sticky is an inner section. It’s height is set to Default. I’ve tried setting its height to 200px and/or giving it a background color, and the issue still exists.

    If I keep Transparent Header ON, there’s no page jumping issue and the plugin seems to work as expected.

    —

    I’ll try to setup an live example page, and PM you.

    Plugin Contributor Robert Wattner

    (@rwattner)

    Yes please set up an example page if you can. I’d like to see exactly what it’s doing so I can find a fix for it. Feel free to email me the link if you don’t want it to be public on here [email protected] thanks!

    Plugin Contributor Robert Wattner

    (@rwattner)

    In the meantime, I’d like to know how far it’s jumping. Is it jumping the entire height of the sticky section or is it a small jump? I ask because borders, margins, and padding differences can cause small jumps if not set correctly. Ex: If you are adding or removing a border upon scrolling then both sections need a border of the same width. Any difference will jump that amount of pixels.

    Thread Starter MountainSmoke

    (@mountainsmoke)

    Ok, on a fresh look it looks like the sticky feature is a factor. Sorry for not being more thorough.

    Transparent header is off, and sticky header is on, the page jump happens.

    Plugin Contributor Robert Wattner

    (@rwattner)

    Ok, I’ll try those settings and see what I can find. Thanks for the thorough responses. Hopefully, we can get this fixed for you.
    I’ll post my findings here when I get some free time.

    Plugin Contributor Robert Wattner

    (@rwattner)

    What background color are you starting with and what are you changing to? There are a couple of ways to achieve particular looks. I just want to make sure you are using the correct settings for what you need.

    Also…
    Are you using padding and “default” section height, or have you set the section min-height?
    Are you using negative margins or any kind?

    Plugin Contributor Robert Wattner

    (@rwattner)

    Ok, I think I have a solution for you. Enable “transparent header” even if you are starting with a solid, sem-transparent, or transparent background color. I will fix this jumping in the next update but for now this should fix your issue.
    Let me know, thanks

    Elementor Pro 2.x actually creates 2 versions of the sticky header to solve the problems many people were having when using negative margins. Enabling the transparent header option targets the version that is already sticky. This means that it isn’t taking up any height on the page…ergo, no jump

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Page jumps when sticky bar appears’ is closed to new replies.