Question

一些简单的jQuery行似乎在Internet Explorer中无法正常工作。在Firefox中正常工作。当您在视口底部的200px内滚动时，固定位置div应在您滚动过去时“粘住”页面。

这是问题的jsFiddle示例： jsFiddle example of fixed position div problem

在Firefox中，该示例正常运行。当滚动位置距文档高度的底部200像素时，固定位置div变为绝对位置，其页面高度的Top：属性减去视口的高度减去元素的高度。换句话说，当你继续滚过它时，它会“粘住”它。

在Internet Explorer中，div只是停留在底部，而jquery if条件永远不会满足。

Answer 1

尝试使用

var till = $('body').height()-800;

...而不是

var till = $('html').height()-800;

我猜测HTML元素本身的高度在IE中没有明确定义。您似乎也正在使用文档就绪功能的“this”来抓取窗口;你应该使用窗口代替。另外，我认为在你的例子中“在你超越极限之后”的定位数学有点不对。

此外，一旦你达到了极限，你的div最终会在其CSS中设置“top”和一个“bottom”值，这可能会混淆浏览器。我添加了一个重置（当“top”值设置时，将“bottom”值设置为“auto”。）

试试这个：http://jsfiddle.net/gothick/HVhLw/32/;它对我来说似乎适用于Firefox和IE。

Answer 2

IE7和IE8是不可预测的固定定位，除非你声明一个合理的！DOCTYPE（不确定IE9，不拥有任何Win7机器）。我总是使用XHTML / 1.0 Transitional来做所有事情，但我认为如果你声明HTML / 4.01它也应该正常工作。

值得注意的是，使用XHTML修复了IE令人烦恼的习惯，即将text-align: center;视为margin-left: auto; margin-right:auto;，并完全忽略margin: auto;声明。

不要忘记validate you markup。

e.g。

<?xml version='1.0' encoding='iso-8859-1' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>

  <head>
    ...
  </head>

  <body>
    ...
  </body>

</html>

使用jQuery更改position属性在IE中无法正常工作

2 个答案: