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

[wzol]

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]

The JS from the demo page seems to work fine.

[frugan-dev]

Same problem to me.. ☹️

[blixhavn]

@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]

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

[mathiasrando]

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]

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]

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]

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]

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]

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]

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