first, check its offset every time you scroll the page
$(document).scroll(function() { checkOffset(); });
and make its position absolute if it has been downed under how much px you need before the footer. Below example I'm taking 10px
function checkOffset() { if($('#stickyform').offset().top + $('#stickyform').height() >= $('#footer').offset().top - 10) $('#stickyform').css('position', 'absolute'); if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) $('#stickyform').css('position', 'fixed'); // restore when you scroll up }
and see that #stickyform parent should be sibling of the footer
<div class="sticky-form-parent"> <div id="sticky-form"> Content... </div> </div> <div id="footer"> </div>
[Check the Live demo][1]

[1]: http://jsfiddle.net/turing1729/1t8qvxaf/4/

[**Live demo**][1]
first, check its offset every time you scroll the page
$(document).scroll(function() { checkOffset(); });
and make its position absolute if it has been downed under 10px before the footer.
function checkOffset() { if($('#social-float').offset().top + $('#social-float').height() >= $('#footer').offset().top - 10) $('#social-float').css('position', 'absolute'); if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) $('#social-float').css('position', 'fixed'); // restore when you scroll up }
notice that `#social-float`'s parent should be sibling of the footer
<div class="social-float-parent"> <div id="social-float"> something... </div> </div> <div id="footer"> </div>
good luck :)

[1]: http://jsfiddle.net/Kkv7X