CSS dynamic Sticky footer required

Question

I am trying to create an HTML form that is fixed to the bottom of the page. So when the user scrolls down, I want the input box to be fixed to the bottom.

But, when the user scrolls to a certain point (say 70% of the way down the page) I want the form to no longer be sticky, and to move up with the rest of the content.

Anyone got any ideas on how to do this using CSS/jQuery?

Answer 1

$(window).scrollTop() will give you the top position of your view port. You can combine this with the $(document).height() to calculate your % of height your are currently viewing. Based on that set the position to the sticky element

var height = $(document).height();
var topPos = $(window).scrollTop();
var perCentage = topPos/height;
if(perCentage > 0.7){
 $('#sticky').css({'position','absolute','top':topPos});
}
else{
 $('#sticky').css('position','fixed');
}