Question

我试图让侧边栏停在热门帖子div上方20px的粉红色类别栏下面。目前，下面的代码会停止侧栏中最顶部div的侧边栏。有没有办法可以改变这个代码，所以它停在最后一个div（热门帖子）？

的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

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

使侧边栏停在某个div处

1 个答案: