Changing position property with jQuery doesn't work correctly in IE
What should be a few simple lines of jQuery doesn't seem to be working properly in Internet Explorer. Works fine in 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.
Here is a jsFiddle example of the problem: jsFiddle example of fixed position div problem
In Firefox, the example works correctly. 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. 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.
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. You also seem to be using the "this" of the document ready function to grab the window; you should use window instead. 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. 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/ ; it seems to work in Firefox and IE for me.
IE7 and IE8 are unpredictable with fixed positioning unless your declare a sensible !DOCTYPE (not sure about IE9, don't own any Win7 machines). 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.
It's also worth noting that using XHTML fixes IE's annoying habit of treating text-align: center; as if it were margin-left: auto; margin-right:auto; and completely ignoring margin: auto; declarations.
Don't forget to 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>
加载中,请稍侯......
精彩评论