Make sidebar stop at a certain div

Question

I am trying to get the sidebar to stop below the pink categories bar 20px above the Popular Posts div. Currently, the code below stops the sidebar at the very top div in the sidebar. Is there a way I can alter this code so it stops at the last div (Popular Posts) instead?

JavaScript

/*cache jQueries for performance*/
var 
    $archiveTitle = jQuery ("#archive-title");
    $content = jQuery ("#content"),
    $categoriesBar = jQuery ("#categories-bar"),
    $loadMore = jQuery ("#load-more"),
    $footer = jQuery ("#footer-menu"),
    $sidebar = jQuery ("#sidebar"),
    $window = jQuery (window),
    doSidebarAdjust = false; // only do sidebar adjustments if the DOM is stable

function isMasonryPage () {
    return $loadMore.length > 0;
}
function isMasonryStable () {
    return $loadMore.hasClass ("disabled");
}
function isSidebarAbove (threshold) {
    return $window.scrollTop () >= threshold;
}
function isSidebarBelowFooter () {
    var
        categoriesBottom = $categoriesBar.offset().top + $categoriesBar.height(),
        sidebarHeight = $sidebar.height (),
        footerTop = $footer.offset().top;
    return categoriesBottom + sidebarHeight + 50 >= footerTop;
}
function canAdjustSidebar () {
    /* Determine if there's room to adjust sidebar */
    var
        archiveTitleHeight = $archiveTitle.length === 1 ? 
            $archiveTitle.outerHeight() : 0;
        answer = $content.height () - 50 >
            ($sidebar.outerHeight () + archiveTitleHeight);
    return answer;
}
function adjustSidebar (threshold) {
    if (isMasonryPage ()) { // can lock to top
        if (isMasonryStable ()) { // can lock to top or bottom
            if (isSidebarBelowFooter ()) {
                $sidebar.removeClass ("fixed").addClass ("bottom");
            } else if (isSidebarAbove (threshold)) {
                $sidebar.addClass ("fixed").removeClass ("bottom");
            } else {
                $sidebar.removeClass ("fixed");
            }
        } else { // masonry not stable but can lock to top
            if (isSidebarAbove (threshold)) {
                $sidebar.addClass ("fixed");
            } else {
                $sidebar.removeClass ("fixed");
            }
        }
    } else if (canAdjustSidebar ()) { // not a masonry page but sidebar adjustable
        if (isSidebarBelowFooter ()) {
            $sidebar.removeClass ("fixed").addClass ("bottom");
        } else if (isSidebarAbove (threshold)) {
            $sidebar.addClass ("fixed").removeClass ("bottom");
        } else {
            $sidebar.removeClass ("fixed bottom");
        }
    }
}

if (jQuery(document.body).hasClass("home")) {
    jQuery (window).scroll(function () { adjustSidebar (654); });
} else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
    jQuery (window).scroll(function () { adjustSidebar (20); });
} else {
    jQuery (window).scroll(function () { adjustSidebar (183); });
}

</script>

HTML

<div id="wrapper">
  <div id="container">
    <div id="content">
      <div id="sidebar"></div>
      <div id="masonry"></div>
    </div>
  </div>
</div>
<div id="footer"></div>

CSS

#sidebar {
  margin: 0;
  right: 0;
  width: 220px;
}
#sidebar.fixed {
  margin-left: 720px;
  position: fixed;
  right: auto;
  top: 173px;
}
#sidebar.bottom {
  bottom: 0;
  top: auto;
  position: absolute;
}

Answer 1

您是否尝试过更改固定在侧边栏相对位置的位置？