Fixes sticky element glitch

[andysellick]

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

What

Fixes #2297

The sticky element was 'flashing' when positioned at the bottom of the area. This was due to the element being constantly switched between the sticky and non-sticky states.

This was an interesting bug. There is a function called on scroll that sets this.hasScrolled and a second function checkScroll called on an interval that checks to see if this.hasScrolled is true, updates the sticky element as appropriate, then sets it back to false, ready for the next scroll.

The function checkResize checks and then sets the equivalent this.hasResized to false. checkResize also sets this.hasScrolled to true, in order to trigger checkScroll (because resizing can change the height of the page). A change to make this code fit our module pattern had updated checkScroll to also set this.hasResized to true (to match checkResize). Unfortunately this had the effect of both functions constantly triggering each other. Unnoticed, the functions attached to the window scroll and resize events hadn't had the proper .bind(this) applied, which meant that the code was seemingly working, but not at all as expected.

Example pages:

• https://www.gov.uk/government/publications/rates-and-allowances-national-insurance-contributions/rates-and-allowances-national-insurance-contributions
• https://www.gov.uk/government/collections/digital-data-and-technology-profession-capability-framework

Why

Visual changes

None.

[gclssvglx]

Great work @andysellick 👍 - thank you so much for fixing this 🙏