Get correct position on header with show/hide function JS-CodePudding

im on the way to get scroll hide/show function work on header section, i made some codepen to show you how works on my page, but if you check it, when you scroll down header didn't get top of the page, when you scroll up it show correctly, is anyone able to guide me :)

var prev = 0;
var nav = document.getElementById("js-scroll-top");

window.addEventListener("scroll", function () {
  var scrollTop = window.pageYOffset || 0;

  if (scrollTop > prev) {
    nav.classList.add("hidden");
  } else {
    nav.classList.remove("hidden");
  }

  prev = scrollTop;
});

body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  background: #FFFF00;
  height: 8000px;
}

.nav {
  background: #111;
  text-align: center;
  color: #fff;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: -moz-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.nav.hidden {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

.header {
  display: flex;
  background-color: #fff;
  justify-content: center;
  color: #000;
  width: 100%;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: sticky;
  top: 3.75rem;
}

p {
  margin: 0;
  padding: 20px;

<div id="js-scroll-top" >Scroll to show/hide this bar!</div>
<div >header</div>

CodePudding user response：

You need to change the top of the .header element as that defines the distance from the top that it "sticks" to.

I would move the nav controlling class to the html element, and use it to also modify the top of the header.

Something like

var prev = 0;

window.addEventListener("scroll", function () {
  var scrollTop = window.pageYOffset || 0;

  if (scrollTop > prev) {
    document.documentElement.classList.add("hidden-nav");
  } else {
    document.documentElement.classList.remove("hidden-nav");
  }

  prev = scrollTop;
});

body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  background: #FFFF00;
  height: 8000px;
}

.nav {
  background: #111;
  text-align: center;
  color: #fff;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: -moz-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hidden-nav .nav {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

.header {
  display: flex;
  background-color: #fff;
  justify-content: center;
  color: #000;
  width: 100%;
  height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: sticky;
  top: 3.75rem;
  transition: top 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hidden-nav .header{
  top:0rem;
}

p {
  margin: 0;
  padding: 20px;

<div id="js-scroll-top" >Scroll to show/hide this bar!</div>
<div >header</div>

CodePudding user response：

On .nav.hidden instead of translating the element, use an absolute position:

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

So as soon as the element above the header gets an absolute position, the header will slide up to take its place.

Actually, this may lead the header to go up immediately without following the animation time. Better if you swap the translation for an height that goes to 0.

I'm not providing snippets cause am writing from my phone.