search

blixhavn / sticky-sidebar-v2

Pure JavaScript tool for making smart and high performance sticky sidebar.
https://blixhavn.github.io/sticky-sidebar-v2/
MIT License
58 stars 25 forks source link

There seem to be a large flickering when the sidebar's height is bigger then the content #12

Open wzol opened 3 years ago

wzol commented 3 years ago

The issue can happen when there is example a 404 or "no results" page, so the main content is small, but the sidebar still has the same long content - is there a workaround or proper way to handle this?

wzol commented 3 years ago

The JS from the demo page seems to work fine.

frugan-dev commented 3 years ago

Same problem to me.. :frowning_face:

blixhavn commented 3 years ago

@wzol Sorry for the long delay. Are you saying that the JS from the demo page helped you solve this somehow, or that it for some reason doesn't show the problem? I haven't been able to reproduce it so far.

Please chime in @frugan-it if you have any more clues.

blixhavn commented 3 years ago

I just merged a pull request into master - could you check if this fixes your problem?

mathiasrando commented 3 years ago

I'm using version 1.1.1(version in the code itself is still 1.0.1 btw) and the issue is present. It keeps changing between sticky and non-sticky state.

I'll investigate and hopefully make a PR to fix it.

melnikbo commented 3 years ago

It seems like a crutch and I don't understand why it works, but if you add "overflow: hidden" to .inner-wrapper-sticky it stops twitching

mathiasrando commented 3 years ago

The issue is that affixType changes between CONTAINER-BOTTOM to STATIC and keep triggering new events. I'm still not sure how to prevent this properly, though.

@melnikbo Unfortunately, in my case adding overflow: hidden to the innerWrapperSelector-element doesn't help.

mathiasrando commented 3 years ago

I figured out what's causing the issue in my instance.

The element I use for creating my instance of StickySidebar has padding-bottom on it and that causes the dims.containerHeight <= dims.sidebarHeight check to toggle between true and false which results in an infinite loop(and flickering).

So does removing the padding on the element pass to the instance also help in your cases @melnikbo, @frugan-it and @wzol?

frugan-dev commented 3 years ago

Hi there,

I created a test with TWBS v4 here https://jsfiddle.net/ewake/xjod0fz7/8/ and actually the flickering stops by removing the margin-bottom from the last paragraph inside the sidebar #sidebar .sidebar__inner p:last.m-0. On jsfiddle, however, the flickering is not present in any case..

Yoda-Soda commented 2 years ago

Just to add my experience with the bug. I've got no padding-bottom on the stickysidebar. But using overflow: hidden on my inner wrapper seem to have fixed my flickering.

filipnils commented 1 year ago

I got this problem when I added margin-bottom to a child element in sidebar