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

时间:2015-12-22 13:39:13

标签: jquery if-statement scroll responsiveness

我有一个正常工作的脚本可以更改滚动图像/徽标,但我只想在浏览器窗口超过767px时启动它 - 否则没有/保持'按原样#39;如何修改此脚本以实现该目标: -

 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语句?

由于

Glennyboy

1 个答案:

答案 0 :(得分:0)

这就是我最终的表现: -

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');
    }
});
});

它适用于加载时滚动和窗口大小,调整大小和滚动