Question

首先，我是jquery的菜鸟。

我的目标是，当我滚动到页面底部时，视口周围会出现一个边框。为此，我找到了一些脚本行，这些脚本行可滚动到页面底部时执行某些操作，并且添加了几行：

添加一个类，当我们在底部时，该类可以隐藏边框

一个用于删除我们不在页面底部时隐藏边框的类。

我设法使代码达到了我的预期，但是由于某种原因，它不再起作用。我在做什么错了？

html

<div class="companyia"></div>

<div class="contacte">
    <div class="marge_contacte"></div>  
    <div class="fons_contacte"></div>
</div>

css

html {
    background-color: black;
}

body {
    margin: 0;
    padding: 0;
}

.companyia {
    height: 100vh;
    background-color: orange;
}

.contacte {
    background-color: black;
    height: 100vh;
  display: grid;
    grid-template-rows: auto 200px;
    grid-template-columns: 100%;
}

.marge_contacte {
  grid-column: 1/2;
    grid-row: 1/3;
  height: 100vh;
  border: 18px solid orange;
  z-index: 1;
}

.marge_contacte-invisible {
    transition: border 0.3s linear;
    border-width: 0px;

}

.fons_contacte {
    height: 200px;
    background-color: red;
    grid-row: 2/3;
    grid-column: 1/2;
}

jquery

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        $(".marge_contacte").removeClass("marge_contacte-invisible");
    }

    else{
        $(".marge_contacte").addClass("marge_contacte-invisible");
    }
});

当我在实际项目中执行此操作时，如果<div class="companyia">的高度大于122vh，则该代码有效。

这里的小提琴无法完成我想要的操作：https://jsfiddle.net/marnau/9pozLf20/

jQuery中的addClass和滚动位置问题

0 个答案: