IE 8中的jQuery .css（“margin-top”，value）未更新（标准模式）

Question

我正在构建一个绑定到$（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像素。 一旦用户滚动到div可能开始从浏览器视口顶部消失的点，我们的目标是开始添加margin-top值（是的，我知道将它设置为position：fixed会做同样的事情，但是它会遮挡ActionBox下面的内容但仍然在菜单中）。

现在，console.log显示事件每次都应该触发，并且它正在设置正确的值。 但是在我的网络应用程序的某些页面中，div没有重新绘制。 这特别奇怪，因为在其他页面（在IE中）代码按预期工作（并且它每次都在FF，Opera和WebKit中工作）。 所有页面都根据W3C验证器和FireFox HTMLTidy验证器进行评估（0错误和0警告），并且不会抛出任何JS错误（根据IE Developer Toolbar和Firebug）。 这个谜团的另一个部分，如果我在IE开发人员工具中的HTML样式资源管理器中取消选择#ActionBox margin-top规则，那么如果滚动事件触发重绘，则div会立即跳回到新调整的位置。 此外，如果我强制IE8进入Quirks模式或兼容模式，则偶数会触发更新。

还有一件事，它在IE7和IE 6中按预期工作（感谢IETester的精彩）

Answer 1

我的Firefox中的脚本有问题。 当我向下滚动时，脚本继续为页面添加边距，我从未到达页面底部。 这是因为ActionBox仍然是页面元素的一部分。 我在这里发布了一个演示 。

• 一个解决方案是添加一个position: fixed到CSS定义，但我发现这对你不起作用
• 另一个解决方案是将ActionBox绝对定位（到文档主体）并调整top 。
• 更新了代码以适应其他人受益的解决方案。

更新：

CSS

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

脚本

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() ，例如

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

Answer 2

IE8的正确格式是：

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

有了这项工作。

Answer 3

尝试使用marginTop代替margin-top ，例如：

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

Answer 4

我找到了答案！

我想承认每个人努力寻找更好的方法来解决这个问题的努力工作，遗憾的是由于一系列较大的限制我无法选择它们作为“答案”（我正在投票，因为你应该得到积分为了贡献）。

我面临的具体问题是一个JavaScript onScoll事件正在解雇，但随后的CSS更新没有导致IE8（在标准模式下）重绘。 甚至更奇怪的是，在某些页面中它正在重绘而在其他页面中（没有明显的相似性）事实并非如此。 最后的解决方案是添加以下CSS

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

这是一个更新的pastbin显示这个（我添加了一些样式来显示我如何实现此代码）。 IE“编辑代码”然后“查看输出”错误谈论的fudgey仍然发生（但它似乎是pastbin（和类似服务）独有的事件绑定问题

我不知道为什么添加“float：right”允许IE8完成对已经触发的事件的重绘，但出于某种原因它确实如此。

Answer 5

试试这个方法

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