如何使用 jQuery 的 ScrollTop 函数和 em 值？

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 数。

来源：在 Javascript 中将 em 转换为 px（并获取默认字体大小）

例子：

// 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());
  }
});