jquery - 添加另一个 CSS id 到 jQuery 函数

Question

我成功地使用此代码在滚动期间淡入/淡出我的菜单 ID #shiftnav-toggle-main。我希望合并另一个 id，例如#side-toggle 到我的函数，但我不确定是否有更好的方法来执行此操作，而无需为新 ID 复制我的所有代码。

var menu = jQuery("#shiftnav-toggle-main");
var opacity = menu.css("opacity");
var scrollStopped;
var fadeInCallback = function () {
    if (typeof scrollStopped != 'undefined') {
        clearInterval(scrollStopped);
    }
    scrollStopped = setTimeout(function () {
        menu.animate({ opacity: 1 }, "slow");
    }, 500);
};
jQuery(window).scroll(function() {
     if (!menu.is(":animated") && opacity == 1) {
     menu.animate({ opacity: 0 }, "slow", fadeInCallback);
     } else {
         fadeInCallback.call(this);
     }
});

Answer 1

您可以创建一个函数来处理该机制:

let scrollStopped;

let fadeInCallback = function() {
  if (typeof scrollStopped != 'undefined') {
    clearInterval(scrollStopped);
  }
  scrollStopped = setTimeout(function() {
    menu.animate({
      opacity: 1
    }, "slow");
  }, 500);
};

let handleScrollFade = function(id) {
  let menu = $(id);
  let opacity = menu.css("opacity");

  $(window).scroll(function() {
    if (!menu.is(":animated") && opacity == 1) {
      menu.animate({
        opacity: 0
      }, "slow", fadeInCallback);
    } else {
      fadeInCallback.call(this);
    }
  });

}

handleScrollFade('#shiftnav-toggle-main');
handleScrollFade('#side-toggle');