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