Home>

With the layout of the menu on the left and the main content on the right,
Changed to fix position:sticky on the left menu when scrolling.

When scrolling at a slightly faster speed on Edge, the display of the menu rattles.
I would like to eliminate this, but is there a good way?

What i tried

(1) I tried nice scroll but it didn't change.
https://github.com/inuyaksa/jquery.nicescroll
Is there any other plugin that can correct such scrolling?

(2) I gave up on position:sticky and tried using sticky-sidebar of js.
The rattling is largely eliminated, but when scrolling to the bottom and returning to the top, it does not fix smoothly and it becomes a momentary rattling movement.
https://abouolia.github.io/sticky-sidebar/

If i don't rattle while scrolling, position:sticky works best, so I'd like to use this if possible.
I also want to support IE11.
*About IE11's position: stickystickyfilljsUse

demo

I can't show you a job case, so it's a reproduction, but the same phenomenon occurs.
https://codepen.io/takayo-nakamura/full/OJVqEyG

Then tried

As a result of trying various ways to eliminate the flicker when using position:sticky, it has not been resolved, but it is a status report.

(1) Disable smooth scroll
I tried implementing js with reference to this, but it did not change.
https://souken-blog.com/2017/08/25/ie11-smoothscroll

(2) Countermeasures against flicker that occurs at position: fixed
I tried something that is often introduced such as transform: translate3d(0,0,0);and negative value of z-index, but it has no effect.
In the first place, whether the same phenomenon occurs with fixed, when I tried fixed and absolute, neither occurred.

It seems that transform doesn't matter because it seems to be a sticky problem.
So far, we are giving up on Edge, but I would like to solve it if it can be solved.

  • Answer # 1

    When I tried the code presented by us, the method of (1) was effective.

    However, in the code of the site,

    if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
     $('body').on("mousewheel", function () {
     event.preventDefault();
     var wd = event.wheelDelta;
     var csp = window.pageYOffset;
     window.scrollTo(0, csp-wd);
     });
     }


    However, our UAMozilla/5.0 (Windows NT 10.0;Win64;x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18363Because,12To18Changed to.
    This is ad hoc, so it's best to make it version independent.

    I mean, the UA of Edge doesn't understand why...