How to create an hide and show header with logo size animation on top?-CodePudding

Hope all of you being well. I need someones help to create an header what hides on scroll to bottom and show on scroll to top, and the same time the logo shrinks on scroll to bottom and back to its original size when scroll to top at 0 again. Important, I need to keep logo with fixed position and make it shows over and out of navbar.

I got how to hide and show the header but still miss the logo shrink animation.

Hope you got my explanation, my english is not really good. Sorry.

        var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("mainheader").style.top = "0";
  } else {
    document.getElementById("mainheader").style.top = "-135px";
  }
  prevScrollpos = currentScrollPos;
}

#mainheader{
            z-index: 5000;
            height: 70px;
            position: sticky;
            width: 100%;
            display: flex;
            flex-wrap: wrap ;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 16px;
            background-color: #000;
            font-size: 20px;
            color: #fff;
            transition: all .4s ease!important;
        }
        #items{
            position: relative;
            right: 15%;
            margin-bottom: 50px;
        }
        a.menuitem{
            margin-right: 45px;
            color: #fff;
            text-decoration: none;
            font-family: Teko;
            font-weight: bold;
            animation-timing-function: ease-in-out;
            transition-duration: 0.3s;
        }
        a.menuitem:hover{
            margin-right: 45px;
            color: #ffcc00;
            text-decoration: none;
            font-family: Teko;
            font-weight: bold;
            animation-timing-function: ease-in-out;
            transition-duration: 0.3s;
        }
        #logo{
            z-index: 10000000;
            position: relative;
            height: 80px;
            margin-top: 10px;
            left: 20%;
            background-color: #000;
            outline: 7px solid #000;
            border-radius: 3px;
            -webkit-transition: height 0.2s; 
            -moz-transition: height 0.2s; 
            -ms-transition: height 0.2s; 
            -o-transition: height 0.2s; 
            transition: height 0.2s; 
        }

<div id="mainheader">
    <img id="logo" src="https://gatolobo.flipamaro.com/wp-content/uploads/2022/05/gl-logo-retina.png" alt="Gatolobo">
        <div id="items">
            <a  href="https://gatolobo.flipamaro.com">HOME</a>
            <a  href="https://gatolobo.flipamaro.com/about">ABOUT</a>
            <a  href="https://gatolobo.flipamaro.com/careers">CAREERS</a>
            <a  href="https://gatolobo.flipamaro.com/#contact">CONTACT</a>
        </div>
    </div>

CodePudding user response：

i took your code and i did small change in the js script.

let oldValue = 0;
let newValue = 0;

let header = document.getElementById("mainheader");
let logo = document.getElementById("logo");

window.addEventListener("scroll", (e) => {
  //asign the new value
  newValue = window.pageYOffset;
  //detecting scroll direction for header top position
  if (oldValue > newValue) {
    header.style.top = "0";
  } else {
    header.style.top = "-135px";
  }
  //check scroll position for chnging logo style
  if (newValue > 0) {
    logo.style.height = "40px";
  } else {
    logo.style.height = "80px";
  }
  //asign the old value
  oldValue = newValue;
});

the html and css stays the same. here is a link for working example: working examole

I hope it helped. if you have any question please feel free to ask