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

Calling javascript function's result into Jquery css event, on load and resize

本文关键字:加载 调整 事件 css 函数 javascript 结果 调用 Jquery      更新时间:2023-09-26

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

它应该仅在窗口加载或视口调整大小时触发此操作。我尝试在低于 1600px 的屏幕分辨率下调用这里的所有内容。但是logoSocialHeight()只有当我首先加载分辨率超过 1600 像素的网页时才有效,而不是将其缩小到 1600 像素以下,它将被触发,否则不会。

有没有一种 Jquery 方法来window.addEventListener s,就像 $(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();
  };
});

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

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