Question

I have a fixed position div that sits at bottom:0. When I scroll down to $('html').height()-200, I want my fixed position div to be position: absolute; top: $('html').height)-200.

Any ideas on how to make this work?

I got pretty close but the code is wonky if your browser window is too tall.

The problem in my code lies in

    $('html,body').height()-800;

Here is an example. Note your browser needs to be a certain size for it to work. The “800” integer in the jsFiddle example is an arbitrary number and that part of the code is what I don’t know how to fix.

http://jsfiddle.net/HVhLw/11/

Answer 1

I figured it out myself, thank you for those who helped. When you want to make a fixed: position div stay where it is after scrolling a certain amount, your scrollTop() condition should be:

($(document).height()-$(window).height())-200

$(document).height() is the height of the page

$(window).height() is the height of the viewport

200 is how far from the bottom of the viewport you want your div to ‘stick’ to