jQuery:如果div高于90vh，则将位置从固定更改为相对

Question

我希望在网站底部有一个固定的联系人字段(#contact(。但是，如果文本区域(#text(高于90vh，则position: fixed应该变为position: relative。

我就是这样开始的：

function contactPosition() {
$("#text").height(higherThan90vh);
$("#contact").css("position", "relative");
}
$(window).on("load resize", contactPosition).resize();

* {
margin: 0;
font-size: 30px;
}
#contact {
position: fixed;
bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div id="contact">[e-mail]</div>

我不知道该如何继续，我将非常感谢你的帮助！：(

Answer 1

根据vh:的含义

vh视口高度的1%。

您可以转换vh中的文本高度，并与90vh:进行比较

// convert px to vh: height retuns a measure in px
function pxTOvh(value) {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
var result = (100 * value) / y;
return result;
}
function contactPosition() {
if (pxTOvh($("#text").height()) >= 90)
$("#contact").css("position", "relative");
else
$("#contact").css("position", "fixed");
}
$(window).on("load resize", contactPosition).resize();

* {
margin: 0;
font-size: 30px;
}
#contact {
position: fixed;
bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="contact">[e-mail]</div>