Post page navigation disappears when scrolling down

[tzzs]

Post-page navigation disappears when scrolling down. And it does not reappear after back to top. Is there a way to solve this?

[tzzs]

I found the following code in the source/js/main.js.

And there is a question:

1. I print the topDistance in the console.
2. I scroll down the page and then back to top. That shows the min of topDistance is 83.5. It will never less than 50, so it cannot show again.

$(window).on("scroll", function() {
        var topDistance = menu.offset().top;

        // hide only the navigation links on desktop
        console.log(topDistance)
        if (!nav.is(":visible") && topDistance < 50) {
          nav.show();
        } else if (nav.is(":visible") && topDistance > 100) {
          nav.hide();
        }

        // on tablet, hide the navigation icon as well and show a "scroll to top
        // icon" instead
        if ( ! $( "#menu-icon" ).is(":visible") && topDistance < 50 ) {
          $("#menu-icon-tablet").show();
          $("#top-icon-tablet").hide();
        } else if (! $( "#menu-icon" ).is(":visible") && topDistance > 100) {
          $("#menu-icon-tablet").hide();
          $("#top-icon-tablet").show();
        }
      });

[tzzs]

I try to change topDistance < 50 to topDistance <= 100.

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

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

[cubicYYY]

Same problem, looking for a solution. I wonder if this issue be introduced recently or it just sit there for a long time?

[deskangel]

I use the document.documentElement.scrollTop; instead of menu.offset().top, and it works.

        var topDistance = document.documentElement.scrollTop;// menu.offset().top;

        // hide only the navigation links on desktop
        const distanceLimit = 50;
        if (!nav.is(":visible") && topDistance < distanceLimit) {
          nav.show();
        } else if (nav.is(":visible") && topDistance >= distanceLimit) {
          nav.hide();
        }

[tzzs]

Same problem, looking for a solution. I wonder if this issue be introduced recently or it just sit there for a long time?

It has been a long time. It looks like the author will not update the project.

[probberechts]

My priorities have indeed shifted to other projects. People have suggested fixes for this issue but none of them really resolved it. If you have something that works across all major web browsers, feel free to create a PR and I'll look into it.

[foxB612]

People have suggested fixes for this issue but none of them really resolved it.

Did a quick test and found that all the proposed fixes work on my machine with Firefox 125.0.2 and Chromium 124.0.6367.91:

• Change limit from 50 to 100 (yes, not very neat);
• Or, alternatives to menu.offset().top:
  • document.documentElement.scrollTop
  • window.pageYOffset
  • window.scrollY
  • $(window).scrollTop()

I saw people saying that for some of these fixes, high resolution or a post full of images may still trigger the issue; but I failed to reproduce (used dev tools to emulate resolution 4096x2160).