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

Question

这里需要一些帮助。 我需要确定某个元素何时位于视口的底部位置，然后为其添加固定类。 所以当元素在底部 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");
            }
        });

Answer 1

IMO 我们应该考虑窗口内容区域的内部高度（窗口高度可以不同）并检查文档是否已滚动。
window.innerHeight - 返回窗口内容区域的内部高度
window.pageYOffset - 返回当前文档从窗口左上角（垂直）滚动的像素

如果元素在开始时低于视口，则此代码应该没问题：

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");
            } 
}

在我们添加或删除它之前，最好检查一下是否有一个“修复”了hasClass的类。

Answer 2

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

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");
}}

通过这种方式我们可以减少一些复杂性和代码