javascript - JQuery matchMedia .scroll 不起作用？

Question

我试图让网站上的 Logo 在滚动时淡出，但仅当它处于中宽媒体查询时才淡出:992px。该代码在加载时有效，但在调整窗口大小时无效，我不太清楚哪里出了问题。

$(document).ready(function(){
});

//Large Screen Check Scroll Event
var screenSize = window.matchMedia("(min-width: 992px)");
scrollFade(screenSize);
scrollFade.addListener(screenSize);

function scrollFade(screenSize){
   if (screenSize.matches){ // if media query matches
     $(window).scroll(function(){
       $(".logo").css("opacity", 1 - $(window).scrollTop() / 600);
     });//do the thing
  }
}

Answer 1

addListener() 是向后的。相反，该函数应该附加到 matchMedia 变量，例如:

screenSize.addListener(scrollFade);

JS Fiddle

如果用户更改窗口大小，您可能还想停止滚动事件，以便它不再与之前匹配。为此，您可以添加 else 语句并添加:

$(window).off('滚动');

JS Fiddle - off()