使側邊欄停在某個div

我想讓側邊欄停留在熱門帖子div上面的粉色類別欄20px以下。目前，下面的代碼會停止邊欄中頂部div的邊欄。有沒有一種方法可以改變這個代碼，所以它停在最後的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; 
}

來源

2014-04-10 J82

您是否嘗試更改固定在側邊欄相對位置的位置？

來源

2014-04-10 11:17:43 Giorgio

你的意思是把'position：fixed'改爲'＃sidebar.fixed'的'position：relative'嗎？我不明白你的意思，因爲它與添加的類相同。 – J82

您是否需要邊欄滾動才能像頁面的其餘部分一樣滾動？我知道你的側邊欄停在導航欄的頂部。那是你想要解決的問題嗎？ – Giorgio

是的，我希望側邊欄停留在熱門帖子div而不是簡報，這是側邊欄中的第一個div。 – J82

使側邊欄停在某個div

回答

相關問題