如何在向下滚动页面时更改div图像

Question

非常简单的javascript问题，我不知道该怎么做：

在网站上向下滚动时： http://cerebral-supplements.myshopify.com/（使用密码＆＃34; aiglog＆＃34;）

标题转变为简约设计。由于徽标太大，它会突出。

更改徽标的div属性以调整图片大小需要哪些javascript代码？

由于

Answer 1

根据需要修改功能值。

function onScrollChange()
{
    if ( document.body.scrollTop > 500 ) {
        var divElement = document.getElementById('divID');

        // either change style properties directly
        divElement.style.width = '100px';
        divElement.style.height = '100px';
        // or change the div's css class
        divElement.classname = 'smallLogoClass';

    }
}

比注册它，所以它在每个滚动上执行。

document.addEventListener('scroll', onScrollChange);

Answer 2

如果您可以添加自定义CSS，请添加以下内容：

/* scale logo down to ~75% size when scrolled sidebar is activated (fadeInDown class) */
.fadeInDown .template-logo img {
   width: 225px;
   height: 61px;
}