Javascript css（“边距顶部”，值）未在IE8（标准模式）中更新

我正在构建一个绑定到$（window）.scroll（）事件的自动跟踪div。这是我的JavaScript

var alert_top = 0;
var alert_margin_top = 0;

$(function() {
  alert_top = $("#ActionBox").offset().top;
  alert_margin_top = parseInt($("#ActionBox").css("margin-top"));

  $(window).scroll(function () {
    var scroll_top = $(window).scrollTop();
    if(scroll_top > alert_top) {
      $("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2))+"px");
      console.log("Setting margin-top to "+$("#ActionBox").css("margin-top"));
    } else {
      $("#ActionBox").css("margin-top", alert_margin_top+"px");
    };
  });
});

此代码假定有此CSS规则

#ActionBox {
  margin-top: 15px;
}

它接受一个id为“ActionBox”的元素（在本例中为div）。div位于一个沿侧面向下的左对齐菜单中，因此它的起始偏移量约为200 px）。目标是在用户滚动过div可能从浏览器视口顶部消失的点后，开始添加边距顶部值（是的，我知道将其设置为“位置：修复”会做同样的事情，但会模糊ActionBox下方但仍在菜单中的内容）

现在，console.log显示事件在每次应该触发时都会触发，并且设置了正确的值。但在我的web应用程序的某些页面中，div没有被重新绘制。这尤其奇怪，因为在其他页面（IE）中，代码按预期工作（并且每次在FF、Opera和WebKit中都工作）。所有页面都会评估（根据W3C验证程序和FireFox HTMLIDY验证程序，0个错误和0个警告），并且不会抛出JS错误（根据IE开发者工具栏和Firebug）。这个谜团的另一个部分是，如果我在IE开发者工具中的HTML样式浏览器中取消选择#ActionBox边距顶部规则，那么div会立即跳回新调整的位置，如果滚动事件触发了重画，它应该会跳回这个位置。此外，如果我强制IE8进入怪癖模式或兼容模式，那么偶数会触发更新

---

还有一件事，它在IE7和IE6中的效果与预期一样（感谢出色的IETester）

尝试使用

marginTop

代替

marginTop

，例如：

$("#ActionBox").css("marginTop", foo);

---

我对你在Firefox中的脚本有问题。当我向下滚动时，脚本会继续在页面上添加边距，我永远不会到达页面底部。这是因为ActionBox仍然是页面元素的一部分。我贴了一封信

• 一个解决方案是在CSS定义中添加一个

  位置：fixed

  ，但我认为这对您不起作用
• 另一种解决方案是将ActionBox绝对定位（相对于文档主体），并调整顶部的

• 更新了代码，使其适合为其他人找到的解决方案

更新：

CSS

剧本

var alert_top = 0;
var alert_margin_top = 0;

$(function() {
  alert_top = $("#ActionBox").offset().top;
  alert_margin_top = parseInt($("#ActionBox").css("margin-top"),10);

  $(window).scroll(function () {
    var scroll_top = $(window).scrollTop();
    if (scroll_top > alert_top) {
      $("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2)) + "px");
      console.log("Setting margin-top to " + $("#ActionBox").css("margin-top"));
    } else {
      $("#ActionBox").css("margin-top", alert_margin_top+"px");
    };
  });
});

另外，在

parseInt（）

中添加一个基数（本例中为10）也很重要，例如

parseInt($("#ActionBox").css("top"),10);

---

我找到了答案

我想感谢每个人都在努力寻找更好的方法来解决这个问题，不幸的是，由于一系列更大的限制，我无法选择他们作为“答案”（我投票给他们，因为你的贡献值得分数）

我面临的具体问题是一个JavaScript onScoll事件，该事件正在触发，但随后的CSS更新没有导致IE8（在标准模式下）重新绘制。更奇怪的是，在一些页面中，它被重新绘制，而在其他页面中（没有明显的相似性），它不是。最终的解决方案是添加以下CSS

#ActionBox {
  position: relative;
  float: right;
}

下面是一个更新的示例（我添加了一些样式来显示我是如何实现这段代码的）。福吉提到的IE“编辑代码”和“查看输出”错误仍然存在（但这似乎是pastbin（和类似服务）独有的事件绑定问题）

---

我不知道为什么添加“float:right”可以让IE8在已经触发的事件上完成重画，但出于某种原因，它确实可以。IE8的正确格式是：

  $("#ActionBox").css({ 'margin-top': '10px' });  

用这个方法。

试试这个方法

$("your id or class name").css({ 'margin-top': '18px' });  

---

jquery的哪个版本？jquery 1.4.1（从中加载）我刚刚更新到1.4.2，但错误仍然以与1.4.1相同的方式存在。不应该是$（“#ActionBox”）.css（“marginTop”…让我想起了“ie内容消失”的错误，驼峰式CSS属性仍然有效，但不要触发我正在寻找的重画。我已经更新了演示中的代码（这表明FF中存在问题）为了更好地匹配我使用这个div的方式。这是一个非常奇怪的链接，当页面第一次加载时它似乎在IE中工作。但是如果我查看代码并返回到查看输出屏幕，它就会停止工作。我尝试在jsbin上测试代码，得到了类似的结果……当它不在bin中时，或者我不了解它时，它似乎对我来说很好如果你更新你的答案来显示一个组合的CSS补丁和页边页眉javascript，那么我会选择它作为正确的答案。完成了…它只是显示了我们需要做多少额外的工作才能让IE工作：（无论如何，我很高兴你得到了你的答案！

$("your id or class name").css({ 'margin-top': '18px' });