时间戳

首页 > 解决方案 > jQuery：如果div高于90vh，则将位置从固定更改为相对

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

问题描述

我想#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">mail@mail.com</div>

我不知道如何继续，非常感谢您的帮助！:)

标签： jquery

解决方案

根据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">mail@mail.com</div>

推荐阅读