如何让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会根据滚动高度进行动态缩小或恢复到原始高度，实现缩小并保持缩小直到回到顶部的效果。

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

打开腾讯云官方网站（https://cloud.tencent.com/）；
在网站搜索框中输入相关的关键词，如"云计算"、"云服务"等；
根据搜索结果查找与云计算相关的腾讯云产品，并点击进入产品介绍页面。

注意：由于无法提及具体品牌商，以上仅为一般性的实现方法和搜索指引，具体产品推荐和链接地址需要根据实际情况进行搜索和选择。

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

、、、、

我试图像这样获得我的头文件：http://commonreads.com/ 当你滚动它时，它会缩小，只有当你返回到顶部时，它才会再次变满。目前，在我的代码中，它正在缩小，但在向上滚动时不会缩小。(而不是一直隐藏到顶部) 我的代码是： <script> $(window).scroll(function').removeClass(

浏览 19提问于2021-01-20得票数 0

回答已采纳

1回答

Jquery window.scrollTo导致页面冻结

、、、、

我正在重新设计一个网站，它有一个100%屏幕高度的标题，当用户开始滚动时需要缩小到0px。我遇到的问题是，在标题缩小到0px后，页面内容略高于窗口顶部。我试过在标题缩小后使用"window.scrollTo(0,0)“，这是有效的，除了在那之后我不能滚动任何东西。我的页面在顶部卡住了？演示--> 有没有人有建议如何让页面保持滚动？或者是一种让页眉具有动画效果的方法，这样内容就不会超过页面的顶部？

浏览 9提问于2017-01-14得票数 0

4回答

文本接近末尾时展开文本字段

我想让文本字段在文本接近末尾时展开，但当我键入第一个字母时，它会缩小，然后展开如何保持文本字段的大小不变，直到它到达末尾并展开//

浏览 5提问于2012-03-23得票数 0

回答已采纳

1回答

从服务器中删除TDE

、、

我已经从服务器上删除了透明数据加密(TDE)，删除了密钥，将数据库切换到简单，缩小了日志，然后恢复到完整。我知道MDF文件将保持相同的大小，直到你缩小它们，但是我希望里面可用的空间会显著增加，但它没有，TDE似乎是它们的两倍。

浏览 0提问于2016-12-16得票数 5

1回答

我正在制作一个导航栏，仍然在页面的顶部。当用户向下滚动时，该条将缩小，当用户返回到页面顶部时，导航条将返回到其原来的维度。问题：当用户向下滚动时，导航条会像预期的那样缩小。但是，如果用户快速回滚到页面顶部，那么导航条将继续缩小，而animate()函数中的scrollTop()回调函数将在几秒钟后触发。但是 {console.log('animated');应该在动画完成后才会出现，直到console.log($

浏览 2提问于2012-06-27得票数 1

回答已采纳

3回答

将图像固定到div底部，剪辑图像顶部。

、

我有一个大的图像，我正在使用作为一个飞溅的图像在我的网站顶部。图像宽度为视口的100%，图像是垂直剪裁的，这取决于视口的大小(同时保持高宽比)。运行下面的代码片段，打开整个页面视图，并调整浏览器窗口的大小以了解我的意思。</p>谢谢!高度最大为100 to 200 to(为顶部的页眉div和下面的内容腾出空间)。如果无法显示

浏览 2提问于2019-01-07得票数 0

2回答

如何保持新规模的Cocos2D

、

我有一个精灵，它在60秒内不断缩小。当碰撞发生时，这个精灵的比例增加了1.5。[randomSprite runAction:[CCScaleBy actionWithDuration:3 scaleX:1.5 scaleY:1.5]];任何帮助或指导都是非常感谢的。谢谢。thisSpriteIsConstatnlyScalingDown runAction:[CCScaleBy acti

浏览 1提问于2012-08-08得票数 0

回答已采纳

3回答

无法在Xcode童话板中调整UITextField大小

、、、

我在Xcode故事板中有一个UITextField，水平对齐到中心，顶部和底部对齐：但是字段太小了，所以我改变了宽度。我保持水平对齐中心，所以它不使用像这样的数值：但是，当我运行或按下编辑器>更新框架时，我注意到字段再次缩小！宽度返回到25。我如何保持宽度宽，比如说250，而不恢复呢？？

浏览 0提问于2018-06-30得票数 1

回答已采纳

1回答

不触发onScroll事件{}函数

、、、

当访问者从顶部窗口位置滚动超过20 it时，标题应该会缩小(以及它的内容)。当访问者滚动回顶部(或<20 it)时，标题应该返回到原来的大小(auto)。我很感谢你

浏览 0提问于2013-06-24得票数 1

3回答

.scrollTop()在悬停时有条件语句中断

、、、、

所以我是jQuery新手，我想我在做些什么，但是我对下面的代码有问题： var $header = $('#header');(300 - $st); $header.hover(function(){ $(this).height(50); } }).scroll

浏览 16提问于2013-09-11得票数 0

回答已采纳

1回答

Android按钮按下并发布动画

、

我试图让我的应用程序中的按钮像这样动画：-Only在两个动画发生后，将调用按钮的功能。我尝试使用以下方法：我很想知道如何正确地实现这样的动画。

浏览 2提问于2018-03-22得票数 0

2回答

如何进行伸缩以持久化CABasicAnimation

、

我正在我的应用程序上创建一些动画，下面的代码将缩小一个对象，直到它消失。我想不出如何让物体消失并保持原样，即。如何使动画在结束后保持不动。这方面有什么问题吗？干杯!

浏览 1提问于2012-07-12得票数 3

回答已采纳

1回答

边距在调整大小时将元素推开

、

其中之一是一个Label，它从网格顶部居中30像素。当用户调整Grid大小时，Label从顶部保持30个像素，这就是我想要的.直到Grid的高度小于30 +标签高度，Label开始消失在网格底部。我希望Label与顶部的保持30个像素，除非没有足够的空间为边距和Label，因此我希望页边距缩小，并允许Label尽可能长的停留在视图中。

浏览 0提问于2011-09-01得票数 0

回答已采纳

1回答

滚动后将导航栏返回到原始位置

、、、

我已经设置了这个页面，当您滚动经过导航栏的顶部时，它会变得粘滞，并停留在页面的顶部。这是我目前工作的。我应该如何更改jQuery，使其保持在原来的位置？$(window).on('scroll', function () { s

浏览 2提问于2015-09-06得票数 0

1回答

引导4-当窗口调整大小时，图像从列溢出

我试图引导一个旧的页面，但我似乎不知道如何阻止我的图像溢出到下一篇专栏。我有一排有两列的行，左边有一幅画。一旦我缩小了窗口的宽度，我的图像就会开始溢出到右边的列，并最终崩溃在右边的列的顶部。我希望左列宽度保持静态或折叠到右侧列的顶部，直到图像不再适合左列。这是我的代码：

浏览 9提问于2017-12-06得票数 1

1回答

在NestedScrollView中，向上滚动会将其他选项卡重置为上面

、、

将SliverAppBar与NestedScrollView中的某些选项卡结合使用时，使用PageStorageKey可能无法保持滚动位置。将左侧选项卡滚动到中间，然后切换到右侧选项卡。在这种情况下，左制表符保持滚动位置。将左侧选项卡滚动到中间，然后切换到右侧选项卡。显示右侧选项卡的顶部并向上滚动，返回到左侧选项卡。在这种情况下，左侧选项卡不保持滚动位置(滚动位置将为0) 无论显示哪个选项卡，滚动到顶部并展开SliverAppBar。Nested

浏览 17提问于2019-07-14得票数 1

1回答

当屏幕宽度较小时，如何确定粘性侧边栏的位置？

、、、

粘性侧边栏应该是“粘性”的，当向下滚动到它自己的顶部时，侧边栏将确定位置并停留在页面的顶部，而不是向上滚动。如果屏幕宽度缩小，侧边栏组件将保持15 and向右，并且位置不正确。缩小页面并看到错误的行为。我知道将固定的15rem设置为正确可能是错误的，我如何在屏幕宽度缩小到一定宽度的情况下将侧边栏保持在主面板的右侧？

浏览 13提问于2021-01-14得票数 0

1回答

如何在最小高度下保持响应卡图像的纵横比？

、

使用react-bootstrap如何让卡片背景图像填满整个卡片，同时在不挤压图像的情况下强制最小高度？我希望Bootstrap缩小图像，直到达到最小高度，然后裁剪图像，如果需要保持最小高度，同时保持图像的纵横比(即:不挤压图像)。

浏览 1提问于2021-02-26得票数 1

1回答

将视频标题锁定到网页顶部

、

我想把一个mp4视频放在页面的顶部。为了让它保持在顶部(而不让下面的东西重叠)，我设置了： <div id="home" class="section full-width full-screen"> <video poster="img/default.png" preload="auto" loop="loop" autoplay="autoplay" muted=&q

浏览 14提问于2020-08-14得票数 0

回答已采纳

1回答