jquery - 如何使用带有 em 值的 jQuery ScrollTop 函数？

Question

如何使此代码使用 em 值？

$(window).scroll(function() {
  if ($(window).scrollTop() > 100) {
    $('#scroller').css('top',$(window).scrollTop());
}
});

我想让 100 变成 10em，我该怎么做？

Answer 1

由于 em 因元素的字体大小而异，因此我假设您引用的是 body 字体大小。

Number(getComputedStyle(document.body, "").fontSize.match(/(\d*(\.\d*)?)px/)[1]);

这将为您提供以像素为单位的字体大小，您可以将其乘以任意数量的 em。

来源:Converting em to px in Javascript (and getting default font size)

例子:

// scroll top using 10em
var tenEms = Number(getComputedStyle(document.body, "").fontSize.match(/(\d*(\.\d*)?)px/)[1]) * 10;

$(window).scroll(function() {
  if ($(window).scrollTop() > tenEms) {
    $('#scroller').css('top',$(window).scrollTop());
  }
});