1

我想执行一个监听器函数（添加类，“光标白色”），只有在满足以下两个条件时才会发生。

  1. $(window).scrollTop 为 0（在窗口顶部）
  2. 并且窗口 <= 900px。

我正在努力使逻辑正确。我已将 mql 放在区间滚动函数中。它在满足 2 个条件时执行（并添加了类），这很好，但是当我从大于 900px 变为小于 900px 宽时，即使滚动位置不在窗口顶部，它也会执行。

这显然不是我们想要的结果。如何确保仅在满足这两个条件时才添加课程。任何帮助是极大的赞赏 ：）

  var didScroll;

  $(window).scroll(function(event) {
    didScroll = true;
});

setInterval(function() {
  if (didScroll) {
  atTop();
  didScroll = false;
  }
}, 250);

function atTop(){
  if ($(window).scrollTop() <= 0){  

    var x = window.matchMedia("(max-width: 900px)")
    myFunction(x) // Call listener function at run time
    x.addListener(myFunction) // Attach listener function on state changes

    function myFunction(e) {
      if (e.matches) {
        if($('.logo').hasClass('invert')){
          $(".header-fixed").addClass("cursor-white");
        }        
    } else{
        $(".header-fixed").removeClass("cursor-white")
      }
    } 
  }
  else {
   $(".header-fixed").removeClass("cursor-white");
  }
}
4

1 回答 1

1

在对逻辑进行了一些修改之后，我想出了如何将条件组合到一个侦听器中并简化逻辑。稍微改变了方法以将窗口 scrollTop 侦听器合并到 mql 中 - 这样更有意义。希望有人会觉得这很有帮助。

    var x = window.matchMedia("(max-width: 900px)")
    myFunction(x) // Call listener function at run time
    x.addListener(myFunction) // Attach listener function on state changes

      function myFunction(e) {
        if (e.matches && $(window).scrollTop() <= 0) {
          //add class or execute any function//
      } else{
        
        }
      }     
    });
于 2020-07-27T03:13:09.283 回答