需要CSS动态粘性页脚

Question

我正在尝试创建一个HTML表单，这是固定在页面的底部。因此，当用户向下滚动时，我希望输入框固定在底部。

但是，当用户滚动到某个点(比如页面向下滚动的70% )时，我希望表单不再粘滞，并与其余内容一起向上移动。

有谁对如何使用CSS/jQuery做这件事有什么想法？

Answer 1

$(window).scrollTop()将为您提供视口的顶部位置。您可以将其与$(document).height()结合使用，以计算当前查看的高度的百分比。在此基础上设置粘性元素的位置

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');
}