0

I am attempting to recreate the initial onScroll effect found on this page: https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c.

If you watch carefully, when you scroll, there is no indication that the nav is position:fixed. It looks as if you have just created a <nav> and kept its position:inherant

When you scroll down a little further, and then scroll up, you get the hidden-nav on scroll effect. But, in every tutorial or trick I've research that recreate this effect it is always obvious that the nav is fixed and the content is about to scroll beneath it, and then the nav hides itself.

I've tried resetting position classes until after the nav is not in view, but nothing is working.

Is this particular iteration of this effect something that can only be accomplished with jQuery?

Theodore Steiner
  • 1,553
  • 2
  • 23
  • 34
  • 1
    I see it works around with 3ish classes: the base `metabar` when its at the start and has position absolute; `metabar--affixed is-minimized` when you scroll down which gives it a `visibility: hidden`; and finally `metabar--affixed is-maximized` when you scroll up which affixes it to the top with `transform: translateY(0)`. – Leon Freire May 04 '17 at 15:20
  • No problem! Glad to help! :) – Leon Freire May 04 '17 at 15:41

0 Answers0