Javascript 确定元素位于视口底部并向其添加类？

这里需要帮助。我需要确定某个元素何时位于视口的底部位置，然后向其添加固定类。所以，当元素位于底部0时向下滚动添加类，当我向上滚动时移除类

$(window).scroll(function() {
            var $el = $('.content-btn-row');
            if ($($el).position().top + $($el).height()) {
                console.log("bottom!");
                $(".content-btn-row").addClass("fixed");
            } else {
                $(".scontent-btn-row").removeClass("fixed");
            }
        });

---

在我看来，我们应该考虑窗口内容区域的内部高度（可能与窗口高度不同），并检查文档是否已滚动。

window.innerHeight

-返回窗口内容区域的内部高度

window.pageYOffset

-返回当前文档从窗口左上角（垂直）滚动的像素

如果开始时元素位于视口下方，则此代码应为ok:

var elem = window.innerHeight + $($el).height(); //position of the element
var winScroll = window.innerHeight + window.pageYOffset; //viewport height + scroll
if (elem) >= (winScroll) {
            console.log("bottom!");
                $(".content-btn-row").addClass("fixed");
            } else {
                $(".scontent-btn-row").removeClass("fixed");
            } 
}

---

在我们添加或删除它之前，最好先检查是否有一个类“fixed”带有

hasClass

。

为什么要通过添加相同的常量值（window.innerHeight）来比较变量

通过这种方式，我们可以减少一些复杂性，并编写代码

$el.position（）.top+$el.height（）==$（窗口）。height（）可能会关闭，但不会完全关闭：）

var elem =  $($el).height();
var winScroll = window.pageYOffset;
if (elem) >= (winScroll) {
    console.log("bottom!");
    $(".content-btn-row").addClass("fixed");
} else {
    $(".scontent-btn-row").removeClass("fixed");
}}