Question

我不知道JQuery和Javascript，只有HTML和CSS。我发现这个代码并且它运行得很好，但我不知道如何使它与em一起工作。

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

我希望100是10em，我该怎么办？

Answer 1

由于ems根据元素的字体大小而有所不同，我假设您将引用body字体大小。

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

这将为您提供以像素为单位的字体大小，无论您想要使用多少个ems，都可以使用多个字体。

来源：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());
  }
});

Answer 2

以下代码可能有助于[1]：http://jsfiddle.net/davidThomas/nEnNC/2/

function px2em(elem) {
var W = window,
    D = document;
if (!elem || elem.parentNode.tagName.toLowerCase() == 'body') {
    return false;
}
else {
    var parentFontSize = parseInt(W.getComputedStyle(elem.parentNode, null).fontSize, 10),
        elemFontSize = parseInt(W.getComputedStyle(elem, null).fontSize, 10);

    var pxInEms = Math.floor((elemFontSize / parentFontSize) * 100) / 100;
    elem.style.fontSize = pxInEms + 'em';
}

}

您也可以参考此问题jQuery/JavaScript: convert pixels to em in a easy way

希望这有帮助

Answer 3

我害怕你不要。 ScrollTop使用像素：

参考：https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

无法轻松地将绝对像素转换为相对em s。

带有em的JQuery ScrollTop

3 个答案: