Fix: Sticky header disappears by momentum scroll

[rnitta]

In the default theme, there is sticky header.

The header will be hidden when the page is scrolled down. like:

This behavior make a problem with momentum scroll.
With momentum scroll, document.scrollingElement.scrollTop can be negative number, so scrolling up above the upper limit of a page makes such logs below:

[Log] document.scrollingElement.scrollTop:0 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-1 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-2 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-4 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-10 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-12 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-11 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-10 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-7 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-4 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-2 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:-1 (book.js, line 593)
[Log] document.scrollingElement.scrollTop:0 (book.js, line 593)

The last part of logs is detected as "scrolling down", so

the header disappear.
I Fixed it by coercing the negative value of document.scrollingElement.scrollTop into 0.

this problem can be reproduce with macOS safari and iOS safari and maybe other momentum scrollable browsers.

[weihanglo]

Amazing! Glad to see someone fix it.

@Dylan-DPC This could be merged now.

[jdx]

if this drives you nuts because the header is hiding the top part you're trying to read and the book you're reading does not yet have this patch, add this custom css (with stylus or something) to make the header always visible:

html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
    transform: none;
}