Question

我正在尝试让我的网站上的徽标在我滚动时淡出，但仅限于媒体查询中间宽度：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('scroll');

JS Fiddle - off()

JQuery matchMedia .scroll无法正常工作？

1 个答案: