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中也有sticker-header

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

因此，当达到所需的滚动长度时，只需设置高度即可调整。

我建议学习使用Chrome Devtools（在Windows上为F12）检查元素，看看其他人是如何做到的，甚至可以创建断点并查看JavaScript何时进行干预。

如果您想查看并尝试检查元素并以此方式学习，这几乎就是我的网站代码； TechGorilla

注意我使用jQuery来做到这一点，我建议您使用jQuery并学习它，因为它可以节省很多时间，并且基本上用于每个不运行像React或Framework这样的框架的主要网页角度

Answer 2

我认为这里不需要javascript。只有html和css可以通过使用html canvas创建公司网站，然后为视口添加一个meta标签，从而使图像根据尺寸进行缩放，并且您还可以最大宽度：徽标的100％，这样它就不会变得过大。

图像大小响应滚动

2 个答案: