Javascript 更改滚动条上的徽标图像大小（宽度和高度）

我尝试使用在这里和JSFIDLE上找到的其他解决方案，但没有成功

我用Joomla！当我向下滚动时，我需要更改徽标大小（H和W成比例）

我已将徽标放入自定义HTML模块中，因为我的模板就是这样工作的

这是包含徽标的代码：

---

您可以使用jQuery+CSS：

jQuery的外观如下所示：

/*----------------------------------------------------
 /*  Small Logo Upon Scroll
 /* ------------------------------------------------- */
jQuery(document).ready(function($) {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 40) {
            jQuery('.s5_logo').addClass('small-logo');
        } else {
            jQuery('.s5_logo').removeClass('small-logo');
        }
    });
});

CSS:

对于第二个问题，将小徽标和大徽标放在一个.png文件中，确保宽度覆盖了它们。然后执行以下操作：

.s5_logo {
background-position: 0 0;
background-repeat: no-repeat;
-webkit-transition: background-position .4s ease-in;
-moz-transition: background-position .4s ease-in;
-o-transition: background-position .4s ease-in;
transition: background-position .4s ease-in;
}

.s5_logo_path {
background-image: url(/path/go/to/combinedlogo.png);
}

.s5_logo_path .small-logo {
background-position: 0px -122px; //here play with the position.
}

HTML:

非常感谢Valery提供简单高效的解决方案！关于如何在图像调整大小时实现过渡比例，有什么建议吗？请参阅我编辑的答案，这应该会让您获得效果。再次感谢！

.s5_logo {
background-position: 0 0;
background-repeat: no-repeat;
-webkit-transition: background-position .4s ease-in;
-moz-transition: background-position .4s ease-in;
-o-transition: background-position .4s ease-in;
transition: background-position .4s ease-in;
}

.s5_logo_path {
background-image: url(/path/go/to/combinedlogo.png);
}

.s5_logo_path .small-logo {
background-position: 0px -122px; //here play with the position.
}

<img alt="Logo" src="/images/logo.png" class="s5_logo s5_logo_path"></div>