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

Question

What should be a few simple lines of jQuery doesn't seem to be working properly in Internet Explorer.应该是几行简单的 jQuery 在 Internet Explorer 中似乎无法正常工作。 Works fine in Firefox.在 Firefox 中工作正常。 When you scroll within 200px of the bottom of the viewport, the fixed position div should "stick" to the page as you scroll past.当您在视口底部的 200 像素内滚动时，固定的 position div 应该在您滚动过去时“粘”到页面上。

Here is a jsFiddle example of the problem: jsFiddle example of fixed position div problem这是问题的 jsFiddle 示例： jsFiddle example of fixed position div problem

In Firefox, the example works correctly.在 Firefox 中，示例工作正常。 When the scroll position is 200 px from the bottom of the document height, the fixed position div becomes position absolute with a Top: property of the height of the page minus the height of the viewport minus the height of the element.当滚动 position 距离文档底部高度 200 px 时，固定的 position div 变为 position 绝对高度，其中 Top: 属性减去页面高度。 In other words, it "sticks" to where it is when you continue scrolling past it.换句话说，当您继续滚动经过它时，它会“粘”在它所在的位置。

In Internet explorer, the div simply just stays at the bottom and the jquery if condition is never met.在 Internet Explorer 中，如果条件从未满足，则 div 仅停留在底部，jquery。

Answer 1

Try using尝试使用

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

...rather than ...而不是

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

I'm guessing the height of the HTML element itself isn't well-defined in IE.我猜 HTML 元素本身的高度在 IE 中没有明确定义。 You also seem to be using the "this" of the document ready function to grab the window;您似乎也正在使用准备好的文档 function 的“this”来获取 window； you should use window instead.您应该改用 window 。 Additionally, I think the positioning maths for the "after you've gone past the limit" in your example was a bit wrong.此外，我认为您示例中“超出限制之后”的定位数学有点错误。

Also, once you've been through your limit, your div ends up with both a "top" and a "bottom" value set in its CSS, which probably confuses the browser.此外，一旦您达到了限制，您的 div 最终会在其 CSS 中设置“顶部”和“底部”值，这可能会使浏览器感到困惑。 I've added a reset (setting the "bottom" value to "auto" when the "top" value gets set.)我添加了一个重置（设置“顶部”值时将“底部”值设置为“自动”。）

Try this: http://jsfiddle.net/gothick/HVhLw/32/ ;试试这个： http://jsfiddle.net/gothick/HVhLw/32/ ； it seems to work in Firefox and IE for me.它似乎适用于我的 Firefox 和 IE。

Answer 2

IE7 and IE8 are unpredictable with fixed positioning unless your declare a sensible,DOCTYPE (not sure about IE9. don't own any Win7 machines). IE7 和 IE8 在固定位置上是不可预测的，除非您声明一个明智的 DOCTYPE（不确定 IE9。不拥有任何 Win7 机器）。 I always use XHTML/1.0 Transitional for everything but I think it should also work properly if you declare HTML/4.01 as well.我总是对一切使用 XHTML/1.0 Transitional，但我认为如果您也声明 HTML/4.01，它也应该可以正常工作。

It's also worth noting that using XHTML fixes IE's annoying habit of treating text-align: center;还值得注意的是，使用 XHTML 修复了 IE 处理text-align: center;的恼人习惯。 as if it were margin-left: auto; margin-right:auto;好像它是margin-left: auto; margin-right:auto; margin-left: auto; margin-right:auto; and completely ignoring margin: auto;并完全忽略margin: auto; declarations.声明。

Don't forget to validate you markup .不要忘记验证您的标记。

eg例如

<?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 个解决方案

解决方案1
1 已采纳 2011-08-15 13:24:34

解决方案2
0 2011-08-15 13:07:48

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-08-15 13:24:34

解决方案2 0 2011-08-15 13:07:48

解决方案1
1 已采纳 2011-08-15 13:24:34

解决方案2
0 2011-08-15 13:07:48