javascript - 在 jQuery 脚本中使用 em

Question

我在一个网站上工作，我试图让每个测量都在 em 中，但是我从一个旧项目中重新利用的脚本我似乎无法使用 em，它似乎只适用于像素。

$(window).scroll(function(){
    $("#nav").css("top",Math.max(0,96-$(this).scrollTop()));
});

这是它的作用的演示：

http://jsfiddle.net/hwRSF/1/

如果有人可以帮助并告诉我我需要做什么，将不胜感激！

Answer 1

因为scrollTop()以像素为单位返回，您需要根据您的基本尺寸将其转换为 em 值。

对于这个特定的问题，您的基本尺寸似乎是 16，因此您只需将像素除以 16。

你的导航CSS：

#nav {
 ...
 top: 6em; /* 96 / 16 = 6*/
 ...
}

jQuery：

$('#nav').css("top",Math.max(0,(96 - $(this).scrollTop())/16) + "em");

小提琴示例：http: //jsfiddle.net/hwRSF/3/

Answer 2

最好使用 em 作为顶部：

$("#nav").css("top", '3em');

在 Linux Mint 上使用 Chrome 28 对我来说工作得很好。

Answer 3

一个很好的方法是让浏览器呈现 1em，然后使用 javascript 找出该值。

HTML

<div class="hidden dummy-em"></div>

CSS

/* only use hidden if you don't want the user to see it
   you can use any element with a height of 1em
   do not use display: none; */

.hidden{
    position: absolute;
    left: 500vw;
}
.dummy-em{
    height: 1em;
}

Javascript(jQuery)

// JS returns these kind of values in px
var oneEm = $('.dummy-em').innerHeight();

避免数学，让浏览器为您完成工作