With very tall page and sidebar there is just a jump at halfway

[wzol]

Here is a sample: https://jsfiddle.net/71zwtoLu/

If you scroll downwards, almost at half of the page, you will see that the "TOP LINES" part of the sidebar will jump into view. It works fine with smaller items.

Is this a limitation, is there a workaround for this?

[vursen]

Hello @wzol,

Could you provide a video where I could see the problem?

I tried to reproduce your issue, but the "TOP LINES" text remains at the top of the page when scrolling that appears to be an expected behavior.

[wzol]

Here, after 17 seconds: https://imgur.com/a/2AzSj6U

[vursen]

@wzol Thanks! Which browser do you use?

[wzol]

Edge 92.0.892.0

[vursen]

@wzol Interesting... I didn't use to see this issue before, but I assume this is something specific to Edge.

Did you have a chance to see if it works in other browsers and other Edge versions?

[wzol]

Strange, seems to work fine in Edge 90.0.818.62 - Edge has smoother scrolling, but shouldn't have this kind of effect. It also seems to work in Chrome 92.0.4512.1

[vursen]

I looked over the transitions and presumably there are two places where the problem could come from.

So, it is either the viewport height is calculated incorrectly at some point:

https://github.com/vursen/FloatSidebar.js/blob/master/src/fsm-transitions.js#L23

...or the same with the path height:

https://github.com/vursen/FloatSidebar.js/blob/master/src/fsm-transitions.js#L24

I'm inclined to think it is most likely something wrong happens with the viewport height..., but I don't have Edge on deck to debug.

I would appreciate if you could debug this case in your Edge version. And to do that, you need to add logging dimensions over here:

https://github.com/vursen/FloatSidebar.js/blob/master/src/fsm-actions.js#L11

[states.TOP_FIXED]: (d, { $sideInner }) => {
  console.log(d); // <!-------------- Here
  
  $sideInner.style.position = 'fixed';
  $sideInner.style.top      = `${d.topSpacing}px`;
  $sideInner.style.bottom   = 'auto';
},

Please, let me know what the dimensions are logged when the plugin enters the TOP_FIXED state.

[wzol]

Sure, I try to help - can I somehow do this with the fiddle above?

[vursen]

I'm sorry for the late response. Is the issue still actual? Does the issue occur in the latest Edge version?

[wzol]

Tried the jsfiddle with Edge 96.0.1044.0 - it still occurs.

[vursen]

I've just released a new version where I added basic unit tests and also fixed some bugs revealed by the added tests along the way.

Please, update the library to v1.2.4 and comment if the issue still occurs for you.

[datio]

We have a similar issue on our website using the previous version (first example in the video).
When scrolling back to the top, on specific heights, the contents are positioned incorrectly.

The newer version (last example in the video) brings the content to the correct position when the page is scrolled back to the top, but jumps a lot more.

[just removed the link as it's 404]

[vursen]

I managed to reproduce both issues and I'll come with a fix on the weekend.

[vursen]

The issue seems to be fixed. Please, update the library to v1.2.5 and comment if the issue has not been resolved for you.

[wzol]

Cool, thank you! :) Here is a new fiddle for others to test ;) https://jsfiddle.net/Lg769zao/