CSS动态粘性页脚需要

Question

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

但是，当用户滚动到某一点（比如页面的70％）时，我希望表单不再是粘性的，并且要与其他内容一起向上移动。

任何人都对使用CSS / jQuery如何做到这一点有任何想法？

Answer 1

$（window）.scrollTop（）将为您提供视口的顶部位置。您可以将其与$（文档）.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');
}