Как я могу добавить класс "bottom" в "#sidebar", как только он достигнет нижней части родительского контейнера?

Я использую приведенный ниже код, который добавляет класс fixed в #sidebar, когда он достигает определенной высоты от вершины сайта в зависимости от того, на какой странице он (например, home, single, page).

Аналогичным образом я хотел бы добавить класс bottom в #sidebar, когда #sidebar достигнет нижней части своего контейнера (#content). Если пользователь прокручивает резервную копию, класс 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;
  }
});

HTML

<div id="container">

  <div id="content">

    <div id="sidebar"></div>

    <div id="masonry"></div>

  </div>

</div>

Ответы

Ответ 1

Я считаю, что это то, что вы пытаетесь сделать?

http://jsfiddle.net/M5sMx/33/

$(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;
}

HTML

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

Для визуального объяснения того, что происходит, см. http://jsfiddle.net/M5sMx/38/ при прокрутке вниз, вы увидите, что означает объект "тестер" делает.