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

【问题标题】：Determine element is at bottom of viewport and add class to it?确定元素位于视口底部并向其添加类？
【发布时间】：2017-11-06 08:03:26
【问题描述】：

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

【问题讨论】：

$el.position().top + $el.height()==$(window).height() 也许？

标签： javascript jquery scroll position offset

【解决方案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“固定”的类。

【讨论】：

关闭但不完全在那里 :) jsbin.com/woxuparohe/edit?html,css,js,output

【解决方案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");
}}

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

【讨论】：