图像大小响应滚动

Question

嗨，我正在尝试编写网站徽标，一旦向下滚动，尺寸会更小，就像这个网站上 https://infrared.cni.columbia.edu/一样。我是 html 的新手，想知道是否有任何命令可以定义滚动时图像的大小。

谢谢。

Answer 1

我已经完全完成了您要做的事情，实际上非常简单

从图像的CSS上类似的东西开始(过渡将允许一个非常平滑的动画过渡，而无需像jQuery这样的库做自定义变量更改，如不透明度和大小，这可能会减慢加载时间(

.logo {
height: 100px;
-webkit-transition: height .4s ease,opacity .3s ease,background-color .3s ease;
-o-transition: height .4s ease,opacity .3s ease,background-color .3s ease;
transition: height .4s ease,opacity .3s ease,background-color .3s ease
}

现在使用 javascript，在一定量的滚动之后，向图像添加一个类来修改其高度;

$( document ).ready(function() {
"use strict"; // Start of use strict
var scrollInital = $(window).scrollTop();
var windowWInitial = $(window).width();
if (scrollInital >= 2) {//2 is the scroll down amount, I like to have mine instantly go down on any length of scroll but customize to your needs.
$("#header").addClass("sticky-header");
}else{
$("#header").removeClass("sticky-header");
}
}

所以现在你的图像标签只有另一个CSS变量，它在itr中也有粘性标题

.logo .sticky-header {
height: 60px;
}

因此，当它达到您喜欢的任何滚动长度时，只需设置高度，它就会进行调整。

我的建议是学习使用Chrome Devtools(Windows上的F12(检查元素，看看其他人是如何做到的，你甚至可以创建断点，看看javascript何时介入。

如果您想查看并尝试检查元素并以这种方式学习，这几乎完全是我的网站代码;科技大猩猩

注意我使用jQuery来做到这一点，我建议你获取jQuery并学习它，因为它可以节省大量时间，并且基本上用于每个没有运行React或Angular等框架的主要网页。

Answer 2

我认为这里不需要javascript。 只有HTML和CSS会通过使用HTML canvas创建您的公司网站，然后为视口添加一个元标记，以便您的图像根据大小调整大小，您还可以 最大宽度 ：徽标的100%，这样它就不会变得过大。