Menu does not appear after scrolling to the top on Chrome

[h0ek]

You can check on demo page: https://probberechts.github.io/hexo-theme-cactus/cactus-white/public/2016/11/14/hello-world/

Scroll down a little bit and the get back to the top using button or just by scrolling and the menu not appear again.

https://user-images.githubusercontent.com/2175271/49327673-2ae53800-f564-11e8-8636-b14c7573693f.gif

On Chromium based browsers it doesn't work, In Firefox it is ok. I found somewhere that changing it from onclick="$('html, body') to onclick="$('document') in actions_desktop.ejs could help, but it does not.

[foxB612]

Confirmed and found out the problem may be caused by this and is somehow related to my PR #286. After scrolling the page, the nav element is gone (display: none), and all the other children of menu are either invisible or floating. In Chromium this will result in zero width of menu, which makes .offset() behave weird. However in Firefox the menu will have a small but non-zero width (something like 0.01666), so the problem doesn't appear in FF.

I'm wondering if it's possible to use window.pageYOffset instead of menu.offset() to directly check the scroll position of the page to fix this issue.

Edit: double checked and turned out my pr didn't modify the nav part.

[purpleskyfall]

Reproduced this issue on Microsoft Edge.

[voigtkampff]

Bug can be reproduced in Chrome as stated before. May be related to how DOM elements are accessed by different browsers (in this case position value relative to the document). See for details.

It can be fixed by changing topDistance value from < 50 to < 100 (any value above 90 may work) in source/js/main.js

if (!nav.is(":visible") && topDistance < 100)

[Raydon10]

Bug can be reproduced in Chrome as stated before. May be related to how DOM elements are accessed by different browsers (in this case position value relative to the document). See for details.

It can be fixed by changing topDistance value from < 50 to < 100 (any value above 90 may work) in source/js/main.js

if (!nav.is(":visible") && topDistance < 100)

At first it seemed that I had succeeded, but then the problem recurred.

[oatsoda]

From some very limited testing, I see that on Chrome offset().top on the first scroll is 38 but upon scrolling down and then back up to the topmost position, offset().top returns 83.28125 - so it isn't calculating

On FF initially it is 36.06666564941406 and upon returning to the top, 35.06666564941406.

Seems like this is a jQuery issue? Or a chromium issue causing that offset to be incorrect.

[oatsoda]

Would an acceptable fix be to also check the window.scrollY to forcibly show the menu again if the window is scrolled to the top?

if (!nav.is(":visible") && (topDistance < 50 || window.scrollY === 0)) {
   nav.show();
} else if (nav.is(":visible") && topDistance > 100) {
   nav.hide();
}

Appreciate that it's not quite the same - as the current code would make it visible before reaching the top - but at least it avoids the menu never re-appearing?