Navbar which hides when you scroll down and appears again when you scroll up-CodePudding

I have explored few approaches to this, but none really seems to work exactly like I would like:

I would like that when scrolling down, navbar is moving up at the speed the user is scrolling down, like that is static at that point.
When it disappears, I would like that the bottom of it is still visible, because this is where I have a progress bar (but maybe progress bar should detach at that point and be on top of the viewport).
When you scroll up, I would like that navbar appears again, again at the speed of scrolling, like it is static, until you see the whole navbar, when it should stick to the top of the viewport.

Here is an example of behavior I would like, but not performance/experience (because behavior is implemented using scroll event, it is not smooth).

I have also attempted to use CSS transform, which would on scroll down add a class to hide the navbar, and scroll up remove the class, animating the navbar hiding/showing, but the issue with that is that animation speed is disconnected with scrolling speed.

Is there some other way to make this work well?

CodePudding user response：

I've looked at your problem and I think i found a simple approach.

with this simple function you can get the amount of pixels user has scrolled.

window.onscroll = function (e) {
    console.log(window.scrollY); // Value of scroll Y in px
};

after user scrolls the desired amount of pixels, make the progress bar fixed top ( or position:fixed;top:0)

CodePudding user response：

Checking the link you provided, it seems to work as expected (you want it to be linked to the scroll event since you want it to move as "static"). If, though, it staggers on some system due to inconsistent scroll events, you could try adding a transition property with a small enough duration. Keep in mind the this should only be enabled while the position property remains the same, otherwise when changing from "absolute" to "fixed" it would mess things up, since the coordinate origin changes.

So you can add another variable let changedPosition = false; and whenever you change the position property you can do

if (position !== "absolute") {
  changedPosition = true;
} else {
  changedPosition = false;
}
position = "absolute";

if (position !== "fixed") {
  changedPosition = true;
} else {
  changedPosition = false;
}
position = "fixed";

and when you apply the style do

navbar.style = `position: ${position}; top: ${navbarTop}px; transitiona: ${
    changedPosition ? "none" : "100ms linear"
  }`;

like https://codepen.io/gpetrioli/pen/XWVKxNG?editors=0010

You should play around a bit with the transition properties you provide, i just put some sample values there.