滚动导航滞后

Question

This is the site I am working on: Click here - Home Page Scroll Issue .

I am using Foundation 5, a sticky scrollbar and Owl Carousel (I have tried using Slick carousel and the result is the same).

The issue I'm experiencing is that whenever I scroll up/down and the top bar goes over the carousel, the whole page stutters and the scroll bumps and stops shorter than its expected trajectory.

I have tried a lot of solutions including applying z-index and -webkit-transform: translateZ(0) rules to the carousel with no success.

This problem doesn't seem to exist in Firefox or Edge or at least is not as obvious.

Any ideas?

**Update, Ajay Varghese's answer seems to help for the down scroll, but the issue still exists when scrolling up. When duplicating the next content row to increase the length of the page, if you try to scroll up to reveal the carousel it jumps and creates a scroll stutter. This issue is very annoying and I still can't seem to find the cause.

Answer 1

try by adding overflow: hidden; in .fixed class

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    overflow: hidden;
    left: 0;
}

Answer 2

I didn't understand exactly how the issue is happening. But I tried something and got the issue solved. Jumping is not happening after I removed the 'margin-top' that you have given for .main-content.That will keep the carousel stick to the .main-content box which we don't want. I solved it by giving some extra height and pushed carousel down by giving 'position:relative' and 'top:15px'. Can you try this and let me know ?

Answer 3

This issue only exists in Chrome. The issue seems to be that WebKit does not handle layering very well sometimes.

Here is the solution that worked perfectly for me: body { -webkit-transform: translate3d(0, 0, 0);}

Hope this helps someone and saves their precious time.

**UPDATE, I didn't realise that this breaks the sticky topbar. Therefore, this solution is not feasible.