Question

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.

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. 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.