如何创建顶部带有徽标大小动画的隐藏和显示 header？

Question

希望你们一切都好。我需要有人帮助创建一个 header 隐藏在滚动到底部并在滚动到顶部显示的内容，同时徽标在滚动到底部时缩小并在 0 再次滚动到顶部时返回到其原始大小。重要的是，我需要将徽标保持在固定位置并使其显示在导航栏上方和下方。

我知道了如何隐藏和显示 header 但仍然错过了徽标收缩动画。

希望你明白我的解释，我的英语不是很好。对不起。

        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 class="menuitem" href="https://gatolobo.flipamaro.com">HOME</a>
            <a class="menuitem" href="https://gatolobo.flipamaro.com/about">ABOUT</a>
            <a class="menuitem" href="https://gatolobo.flipamaro.com/careers">CAREERS</a>
            <a class="menuitem" href="https://gatolobo.flipamaro.com/#contact">CONTACT</a>
        </div>
    </div>

Answer 1

我使用了你的代码并对 js 脚本做了一些小改动。

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;
});

html 和 css 保持不变。这是一个 link 的工作示例： working examole

希望对您有所帮助。如果您有任何问题，请随时提问

如何创建顶部带有徽标大小动画的隐藏和显示 header？

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

html

javascript

css

header