Home Forums Community Forum Sticky header is jumping/bouncing on mouse scroll

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • cupax
    Participant
    Post count: 2

    Hello.

    I’m on PC with Chrome or Edge.

    Whenever I scroll the page from the top, the sticky header slightly jumps (bounces) for a fraction of a second. The bounce is very small, but it gets bigger the stronger you scroll the mouse wheel. It happens only with a mouse wheel – if you grab the scroll-sidebar of your browser and move it down the header won’t jump.
    The annoying bounce is even more present if you have the secondary header turned on.

    You can see this by going to Avada demo page – Construction. Just go to top of page and scroll down fastly. https://avada.theme-fusion.com/construction/

    Any ideas?

    Jan Bures
    Participant
    Post count: 1

    Same problem, waiting for solving submited ticket about this.

    marklchaves
    Participant
    Post count: 633

    Hi,

    I was able to fix the Construction’s janky sticky header using this CSS.

    
    /* Fix janky sticky header on Avada Construction demo. */
    .fusion-header-v1.fusion-logo-alignment.fusion-logo-left.fusion-sticky-menu-.fusion-sticky-logo-.fusion-mobile-logo-1.fusion-mobile-menu-design-modern {
        will-change: transform;
    } 
    

    This is a known issue for fixed headers. For the Construction demo, it’s performing an expensive repaint on the header. The will-change: transform; let’s the browser know that an expensive repaint is coming so start setting up for it before it happens.

    More on MDN.

    I hope this works for you! 😉

    globaldize
    Participant
    Post count: 2

    I tried with ‘will-change transform but is an unknown property error coming up 🙁 Still looking for this bounce solution on scroll to be fixed

    Jetxpert-Envato
    Participant
    Post count: 126

    Good Day!

    Found a solution, but not sure how to apply it to the Avada theme.

    Click here.

    Solution looks clean. Hopefully, Theme Fusion will look into this and fix the issue.

    Meanwhile, if a “coding guru” would like to convert this into a snippet or plugin, that would be great.

    Cheers!

    Jetxpert-Envato
    Participant
    Post count: 126

    Good Day! (again)

    Reference (for above solution): https://css-tricks.com/forums/topic/fixed-nav-on-scroll-content-jumps/

    Cheers!

    cekrse
    Participant
    Post count: 3

    Yes, this is really not pretty.
    Before buying the theme, I noticed it already but was hoping there is an easy fix.
    Any new (simple) solutions so far?

    Nemi5150
    Participant
    Post count: 1

    I am wondering if you are talking about the same problem I am having. What I see though is more of a “snapping” action. When the page scrolls up and gets near the top, it ‘snaps’ to the top, causing a jumping effect. When scrolling down from the top it ‘sticks’ and the first amount of scroll does not work and then it ‘pops’ off the top of the page.

    Oddly, it does NOT do this on pages with a Fusion Slider. Those pages work as they used to and scroll normally even with a sticky header. You can see this on these two pages:

    Page that pops: https://changingspacessrs.com/about/
    Page that doesn’t: https://changingspacessrs.com/services/

    cekrse
    Participant
    Post count: 3

    Pretty sure we are talking about the same thing!

    I noticed that on the “Services” page, it does also happen if you scroll down, then up to the very top again, and then down again… 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.