Problem with sticked div when it's height is larger than screen

[ArseniyShestakov]

Two issues occur when height of sticked div is bigger than height of the screen:

• When moving screen too fast or when browser is lagging vertical position of sticked block div get out of sync.
• When it's happens spacer start to overlap sticked div and it's impossible to click on any controls covered by spacer. This can be bypassed by adding z-index: -1 for spacer, but I not sure if it's good idea.

I find that issue while trying to use HC-Sticky on this website. If you play with browser window size (it's happen more often on small resolutions) and try to scroll page down and up left panel with filters will sometimes end up too low or too high relatively to the div it's sticked to.

It's harder to reproduce bug on lightweight page, but still possible so I made standalone reproduction. Yet in this case block could only end up too low, but it's never end up covering header: https://jsfiddle.net/ArseniyShestakov/3ypjufuL/

Reproduction:

1. Open the page.
2. Scroll it down. Make sure you get to the end of sticked block and then little bit more so HC-sticky start working.
3. Now drag scroll bar rapidly to get on top of the page.
4. In many cases you'll end up with left sticked block being too low and checkboxes will be inaccessible because they overlapped by spacer.

Tested in both latest stable Firefox and Chromium.

[ArseniyShestakov]

Screenshots.

On page load: After scrolling page down and scrolling up rapidly:

[somewebmedia]

@ArseniyShestakov thanks for reporting this, I've managed to reproduce it. I'll try to figure out why is that happening.

[somewebmedia]

@ArseniyShestakov the bug should be fixed now, can you please check the latest version (2.1.5) and let me know if it works for you? Thanks.

[ArseniyShestakov]

Thank you so much with rapid fix. I'll test it immediately!

[ArseniyShestakov]

I could confirm problem with displacement is fixed, tested in Chrome, Firefox and Edge.

Unfortunately problem with spacer overlapping is become worse. Looks like half time when hc-sticky is active spacer making elements inaccessible for clicks. You should be easily able to reproduce it on same jsfiddle linked in original issue (it's use latest HC-sticky now). I'll for now hackfix with z-index on website I working on, but proper fix could be nice to have.

Thanks again for your work!

[somewebmedia]

Hey @ArseniyShestakov, I missed your last comment. The spacer stack order is now handled automatically.

[ArseniyShestakov]

Thanks again for fixing it!