Javascript 我怎样才能添加一个“类”呢；底部“；至#边栏“；一旦它到达其父容器的底部？

我正在使用下面的代码，它将一类

固定的

添加到

#侧边栏

，当它从站点顶部到达一定高度时，这取决于它所在的页面（即主页、单页、网页）

以类似的方式，我想在

#sidebar

到达容器底部（

#content

）后，向

#sidebar

添加一个

底部
类。如果用户向上滚动，则应删除
bottom
类，并将
fixed
类添加回

我们的目标是，一旦固定边栏到达其容器的底部，就尝试使其与容器中的其余内容一起向上移动

JavaScript

var threshold = 236;
if (jQuery(document.body).hasClass("home")) {
  threshold = 654;
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
  threshold = 20;
}

var scrolled = false;
jQuery(window).scroll(function () {  
  if (jQuery(window).scrollTop() >= threshold && !scrolled){
    jQuery('#sidebar').addClass('fixed');
    scrolled = true;
  } else if (jQuery(window).scrollTop() < threshold && scrolled) { 
    jQuery('#sidebar').removeClass('fixed');
    scrolled = false;
  }
});

var阈值=236；
if（jQuery（document.body）.hasClass（“home”））{
阈值=654；
}else if（jQuery（document.body）.hasClass（“single”）| | jQuery（document.body）.hasClass（“page”））{
阈值=20；
}
var scrolled=false；
jQuery（窗口）.scroll（函数（）{
if（jQuery（window）.scrollTop（）>=阈值&&！已滚动）{
jQuery（“#侧栏”）.addClass（'fixed'）；
滚动=真；
}else if（jQuery（window）.scrollTop（）

HTML

我相信这就是你想要做的


HTML

<div class="body">
    <div class="leftBar">
        La la links
        <div class="floater" id="floater">
            Pooper scooper!
        </div>
    </div>
De body
</div>


拉拉林克斯酒店
拉屎铲！
德博迪

要直观地解释正在发生的事情，请在向下滚动时查看，您将看到“tester”对象正在做什么。
是的，这就是我需要的。好的，现在我必须弄清楚如何将其应用于我的情况。作为JavaScript的初学者，我正在尝试破解您的代码。我发现了一些东西，但不是全部。例如，
tester
和
testPosition
的用途是什么？我正试图进一步简化您的代码，并添加注释，以帮助自己在安装过程中实现这一点。哈哈：我也在上面的代码中添加了注释和您的注释。如果您真的想了解发生了什么，请将不透明度更改为0.5。还有其他方法可以做到这一点，但这是一种快速的方法。对于0.5不透明度（向下滚动）。
$(window).on("scroll", function() { // When you scroll the window, do this function
 updatePosition();
});

var tester = null;
function updatePosition() {

    var sidebar = $("#sidebar"); // Set #sidebar to a variable called "sidebar"
    if (tester == undefined) {
        // Create a tester div to track where the actual div would be. 
        // Then we test against the tester div instead of the actual div.
        tester = sidebar.clone(true).removeAttr("id").css({"opacity" : "0" }).insertAfter(sidebar);
    }

    // If the tester is below the div, make sure the class "bottom" is set.
    if (testPosition(tester)) {
        sidebar.addClass("bottom");
        console.log("Add class");
    }
    else {
        sidebar.removeClass("bottom");
        console.log("remove class");
    }
}

function testPosition(sidebar) {
    console.log(sidebar.offset().top + " + " + sidebar.outerHeight() +" >= " + sidebar.parent().offset().top + " + " + sidebar.parent().outerHeight());
    if (sidebar.offset().top + sidebar.outerHeight() >= sidebar.parent().offset().top + sidebar.parent().outerHeight()) return true;
    return false;
}

<div class="body">
    <div class="leftBar">
        La la links
        <div class="floater" id="floater">
            Pooper scooper!
        </div>
    </div>
De body
</div>