Scrolling to the bottom is not possible in certain conditions

[cmorgant]

Hello Laurent,

I have an issue with lrStickyHeader/stStickyHeader when the table size is a little bit bigger than the size of the viewport.
When the sticky header appears, it is removed, making the page scroll up again.

See http://run.plnkr.co/M9d8ptMcl3ivpJLZ/ with a viewport size of 800x600 and scroll to the bottom of the page to see the undesired effect.

Regards,
cmorgant.

[mathiasconradt]

@cmorgant The plunkr link doesn't exist anymore.

[sgmccli]

@lorenzofox3 Hi Laurent,

I have the same issue and I understand the cause. In my case, the issue manifests itself when scrolling slowly. When I scroll quickly it does not occur. I have traced the issue as below....

Start scenario: lr-sticky-header is not applied

• Scroll down offsetTop = 449, window.scrollY = 454
• The test to see if lr-sticky-header should be applied is conducted
• offetTop - window.scrollY < 0 the result is -6 (line 53 of lrStickyHeader.js)
• timeout is set and lr-sticky-header is applied.
• Checking window.scrollY the value is now 417
• Test is immediately performed to see if lr-sticky-header should be removed.
• this.threshold - window.scrollY > 0 this.threshold = 449, winow.scrollY = 417, result = 32
• lr-sticky-header is removed.
• As soon as it is removed window.scrollY reads 454
• This repeats adding and removing the class and you are unable to scroll down.

CAUSE:
this.thead.style.position = 'initial';
this.thead.style.position = 'fixed';

When these lines are applied through the chrome console they toggle window.scrollY between 417 and 454 respectively, this behaviour is only apparent when scrolling slowly.

When scrolling quickly the Y scroll value is large enough to not cause the lr-sticky-header class to be immediately removed.

I believe the problem to be that when positioning the thead as fixed you are removing it from the flow of the page and so reducing the length of the page. When you set it back to initial it is reintroduced and the page lengthens.

I think the best way to address this is to read this.thead.clientHeight before changing the position and factor it into the threshold calculation. What are your thoughts?

I've submitted a pull request.