在这里需要一些帮助。我需要确定某个元素何时位于视口的底部,然后向其中添加固定的类。因此,在向下滚动时,当元素位于底部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");
            }
        });

最佳答案

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一个“固定”类。

关于javascript - 确定元素在视口(viewport)的底部并向其添加类?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44370784/

10-14 18:35
查看更多