如何让header缩小并保持缩小直到回到顶部？

要让header缩小并保持缩小直到回到顶部，可以通过JavaScript和CSS来实现。下面是一种常见的实现方式：

首先，在CSS中给header设置初始的样式，包括高度、背景颜色等。

header {
  height: 100px;
  background-color: #f1f1f1;
  transition: height 0.3s ease; /* 添加过渡效果，使缩放平滑 */
}

使用JavaScript监听页面滚动事件，在滚动时动态改变header的样式。

window.addEventListener('scroll', function() {
  var header = document.querySelector('header'); // 获取header元素

  if (window.pageYOffset > 0) { // 当页面滚动高度大于0时
    header.style.height = '60px'; // 缩小header高度为60px
  } else {
    header.style.height = '100px'; // 恢复原始高度为100px
  }
});

在HTML文件中引入上述的CSS和JavaScript代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Header缩小示例</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <header>
    <!-- header内容 -->
  </header>
  <div class="content">
    <!-- 页面内容 -->
  </div>
</body>
</html>

这样，当页面滚动时，header会根据滚动高度进行动态缩小或恢复到原始高度，实现缩小并保持缩小直到回到顶部的效果。

关于推荐的腾讯云相关产品和产品介绍链接地址，由于不能直接提及具体品牌商，建议使用以下方法进行搜索：