为什么我的jQuery脚本第一次加载不正确

Question

我在这个页面上使用jQuery脚本https://dearvr.netlify.app/demo.html在身体结束前的底部，如下所示：

<script>
$(document).ready(function(){
var demomain = $(".demo-bg section");
var demomainW = demomain.height()+ 150;
$('head').append('<style>.demo-footer{top:'+ demomainW +'px !important;}</style>');
console.log("HEIGHT --> "+demomain.height());
});
</script>
</body>

它应该检测页脚上方部分的高度，以便页脚可以改变其"高度"；顶部"；css值。很明显，我在没有剧本的情况下尝试过，但我就是无法让它发挥作用。有没有一种方法可以让我在没有jQuery的情况下只使用普通的CSS

无论如何，脚本通常第一次加载不正确(在多个设备上测试(。我已经在准备好文档的情况下启动了该功能，所以我真的不知道是什么原因导致了问题。。。

任何帮助都会得到通知。感谢

Answer 1

如果您提供的链接是问题的实际链接，那么只需在jquery脚本引用下面添加该脚本标记。

<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var demomain = $(".demo-bg section");
var demomainW = demomain.height()+ 150;
$('head').append('<style>.demo-footer{top:'+ demomainW +'px 
!important;}</style>');
console.log("HEIGHT --> "+demomain.height());
});
</script>

Answer 2

您的脚本加载良好，但内容图片和其他内容必须未完全加载，因此脚本无法计算实际的最终大小

在另一次触摸放下所有这些位置固定/绝对的东西时，你永远不需要手动设置页脚位置，只需让浏览器自己使用经典和正常的块定位即可

Answer 3

在加载jquery库之前，您正在引用它。您有两个选项。

1#首先加载查询库

2#打开"；文档就绪"；函数。

jQuery的纯JavaScript等价物'；s$.ready((-当页面/DOM准备好时如何调用函数

就我个人而言，我会选择#1。首先在head标记中加载jquery-libarary。并将脚本标记放在下面