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用于top：

$("#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();

避免数学运算并让浏览器为您完成工作

在jQuery脚本中使用em

3 个答案: