IE 8中的jQuery .css("margin-top",value)未更新(标准模式)

我正在构建一个绑定到$(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的精彩)

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

一种解决方案是添加一个position: fixedCSS定义,但我发现这对你不起作用

另一个解决方案是将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");
    };
  });
});

此外,重要的是在您的基础上添加一个基础(在这种情况下为10)parseInt(),例如

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