javascript - 在加载和调整大小时将 javascript 函数的结果调用到 Jquery css 事件中

Question

我想将 logoSocialHeight() 函数的结果调用到 $('header.main').css('top',logoSocialHeight()).hover(>/p>

它应该只在窗口加载或视口(viewport)调整大小时触发。我尝试调用低于 1600px 屏幕分辨率的所有内容。但是 logoSocialHeight() 只有在我第一次加载分辨率超过 1600px 的网页时才有效，然后我将其缩小到 1600px 以下并且它会被触发，否则不会。

是否有 window.addEventListener 的 Jquery 方式，例如 $(window).on('load resize'?

function logoSocialHeight() {
  var logoHeight = $('header.main .logo').outerHeight(true);
  var socialHeight = $('header.main .social-links').outerHeight(true);
  var sum = -Math.abs(logoHeight + socialHeight - 10);
  console.log(sum);
  return sum;
};
window.addEventListener('load', logoSocialHeight, false);
window.addEventListener('resize', logoSocialHeight, false);

function bindNavUp() {
  var lastScrollTop = 0, delta = 5;

  $(window).on('scroll', function() {
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta) {
      return;
    };

    if (st > lastScrollTop) {
      // downscroll code
      $('header.main').css('top',logoSocialHeight()).hover(
        function() {
          $('header.main').css('top','0');
        }
      );
    }
    else {
      // upscroll code
      $('header.main').css('top','0');
    };
    lastScrollTop = st;
  });
};
function unbindNavUp() {
  $(window).unbind('scroll');
};
function handleNavUp() {
  if ($(window).width() < 1600) {
    bindNavUp();
  }
  else {
    unbindNavUp(); 
  };
};
$(document).ready(function() {
  var timer;
  $(window).on('load resize scroll', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      handleNavUp();  
    }, 100);
  });
  handleNavUp();
});

更新:

工作，简化的代码:

function logoSocialHeight() {
  var logoHeight = $('header.main .logo').outerHeight(true);
  var socialHeight = $('header.main .social-links').outerHeight(true);
  var sum = -Math.abs(logoHeight + socialHeight - 10);
  //console.log(sum);
  return sum;
};
function bindNavUp() {
  var lastScrollTop = 0, delta = 5;
  $(window).on('scroll', function() {
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta) {
      return;
    };

    if (st > lastScrollTop) {
      // downscroll code
      $('header.main').css('top',logoSocialHeight()).hover(
        function() {
          $('header.main').css('top','0');
        }
      );
    }
    else {
      // upscroll code
      $('header.main').css('top','0');
    };
    lastScrollTop = st;
  });
};
function unbindNavUp() {
  $(window).unbind('scroll');
};
$(window).on('load resize', function() {
  if ($(this).width() < 1600) {
    bindNavUp();
  }
  else {
    unbindNavUp();
  };
});

Answer 1

我会发表评论，但遗憾的是我的代表人数 < 50，所以我不被允许并且被迫在这里写信。我不确定这是否对您有帮助，因为我不太熟悉 JQuery，但是当您在纯 JavaScript 中添加事件监听器时，您不能在注册时使用括号“()”。您只需为函数命名。

$('header.main').css('top',logoSocialHeight).hover(