Question

我有一些代码允许我在从顶部滚动时更改img src＆lt; 120 px。但是，当浏览器调整大小时，我需要将图像更改为另一个图像所以我应该得到，当我向下滚动120像素时，1张图像，如果我已经向下滚动120像素，则为1张图像，但我将浏览器的大小减小到850像素， 1个图像，如果我在浏览器的顶部，另一个图像，如果我减少浏览器的大小。

到目前为止，如果我向下滚动120px，我只能更改img src，但如何同时解决浏览器大小？

        $(window).on('scroll', function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > 120) {
            $('#logo').attr('src', 'http://www.kubographics.com/adiacens/images/logo1-black.svg');
            $('#logo').css('margin-top', '10px');
            }
            else {
            ('#logo').attr('src', '');
            $('#logo').css('margin-top', '0px');
            }
            });

感谢您的帮助！

Answer 1

更改img使用css媒体查询

#logo {
background: url("http://www.kubographics.com/adiacens/images/logo1-black.svg")
}
@media (max-width: 850px) {
background: url("http://www.kubographics.com/adiacens/images/logo2-black.svg")
}

根据浏览器的宽度和顶部的Y位置更改Img

1 个答案: