jQuery 在响应断点滚动时更改图像

Question

我有一个运行良好的脚本，可以在滚动时更改图像/徽标，但我只希望在浏览器 window 大于 767px 时触发它 - 否则 nothing/keep 'as is'.请问我该如何修改这个脚本来实现：-

 jQuery(function($) {
//caches a jQuery object containing the brand image element
var brandimg = $(".x-brand img");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
 // if( $(window).width() > 767 {
  if (scroll >= 40) {
        brandimg.attr('src', 'logo-icon.png');
        brandimg.removeClass('x-img-1').addClass("img-2");
    } else {
      brandimg.attr('src', 'logo-full.png').addClass("logo-full");
      brandimg.removeClass("x-img-2").addClass('img-1');
    }
});
});

我不能在这里使用媒体查询，因为 'Wordpress' 主题使用图像而不是图像背景。

不确定当前函数周围是否有额外的 if 语句？

谢谢

格兰尼男孩

Answer 1

我最后是这样的:-

jQuery(function($) {
//caches a jQuery object containing the brand image element
var brandimg = $(".x-brand img");
jQuery(window).on("focus load resize scroll",function(e){
var scroll = $(window).scrollTop();
if (($(window).width() < 460) || (scroll >= 40)) {
        brandimg.attr('src', 'logo-icon.png');
        brandimg.removeClass('x-img-1').addClass("x-img-2");
    } else {
      brandimg.attr('src', 'logo-full.png').addClass("logo-full");
      brandimg.removeClass("x-img-2").addClass('x-img-1');
    }
});
});

它非常适合滚动和 window 大小加载、调整大小和滚动

jQuery 在响应断点滚动时更改图像

jQuery Change Image on Scroll at Responsive Breakpoint

jquery

scroll

if-statement

responsiveness