13

我正在构建一个绑定到 $(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 可能开始从浏览器视口顶部消失的点后开始添加到 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）

4

5 回答 5

13

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

  • 一种解决方案是将 a 添加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");
    };
  });
});

此外，在您的 中添加一个基数（在这种情况下为 10）也很重要parseInt()，例如

parseInt($("#ActionBox").css("top"),10);
于 2010-02-23T22:34:09.160 回答
1

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

$("#ActionBox").css("marginTop", foo);
于 2010-02-23T22:09:00.233 回答
1

我找到了答案！

我想感谢大家为寻找更好的方法来解决这个问题所做的辛勤工作，不幸的是，由于一系列更大的限制，我无法选择它们作为“答案”（我投票给它们是因为你应该得到分数贡献）。

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

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

这是一个更新的Pastbin，显示了这一点（我添加了更多样式来展示我如何实现此代码）。fudgey 谈到的 IE“编辑代码”然后“查看输出”错误仍然存​​在（但这似乎是 Pastbin （和类似服务）独有的事件绑定问题

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

于 2010-02-24T18:05:00.763 回答
1

IE8 的正确格式是：

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

有了这项工作。

于 2013-12-10T21:24:32.297 回答
1

试试这个方法

$("your id or class name").css({ 'margin-top': '18px' });
于 2016-08-22T08:36:56.020 回答