我該如何創建一個「粘性」浮動固定/滾動邊欄？

Question

我有一個網站，應該留在用戶的左邊吧。 因此，當用戶滾動時，側欄會一直滾動，直到頁面頂部爲5px爲止。從那時起，它應該鎖定在那裏。

當然，視口可能比左欄小，所以左欄不能完全適合屏幕。雖然不是很有戲劇性。不過，如果用戶滾動到底部，我會希望它的側邊欄底部'點擊'頁面的頁腳，然後再一次滾動頁面。

這是我得到的代碼：我的網站的基本設置和我的問題的第一部分的嘗試（但你會看到它不起作用）：jsfiddle。

我認爲問題的第一部分是相當清楚的，但第二部分可能會有點費解，所以這裏是一個樣機： 你可以看到，有沒有帶出的文字，因爲文字是上面的視。

下面是我嘗試了JS的第一部分：

$(document).ready(function() { 
    var theLoc = 5; 
    var links = $('#left'); 
    $(window).scroll(function() { 
     console.log('scroll'); 
     if (theLoc >= $(window).scrollTop()) { 
      if (links.hasClass('fixed')) { 
       links.removeClass('fixed'); 
      } 
     } else { 
      if (!links.hasClass('fixed')) { 
       links.addClass('fixed'); 
      } 
     } 
    }); 
}); 

但可能更多的CSS問題：

.fixed { 
    position:fixed; 
} 

我想等等再（在指定高度，因爲它出現像非常大），但沒有提前。

Answer 1

我之前做過這個，這裏是我創建的代碼：View the JSFiddle。你可能不得不稍微改變你的標記，我不知道這將與你的桌面佈局有什麼關係，我建議使用divs並將它們浮動來佈置你的內容。），或者，你可以使用下面的代碼/邏輯和roll your own與您自己的佈局。

基本上，
- 獲取我們的元素
- 獲取側邊欄的頁面加載
位置 - 獲取#content.outerHeight()

一旦我們有了這些增值經銷商，在window scroll測試，看看我們<=（少小於或等於）我們原來的sidebarTop position或檢查，如果我們過去blogHeight，如有斷2是真實的，除去粘類，elseif我們的滾動是>=我們原來sidebar位置，然後添加.sticky類（^ h作爲position: fixed）。

Check the JSFiddle (Click here)

---

的的Javascript是像這樣：

// Cache our vars for the fixed sidebar on scroll 
var $sidebar = $('#sidebar-nav'); 

// Get & Store the original top of our #sidebar-nav so we can test against it 
var sidebarTop = $sidebar.position().top; 

// Edit the `- 10` to control when it should disappear when the footer is hit. 
var blogHeight = $('#content').outerHeight() - 10; 

// Add the function below to the scroll event 
$(window).scroll(fixSidebarOnScroll); 

// On window scroll, this fn is called (binded above) 
function fixSidebarOnScroll(){ 

    // Cache our scroll top position (our current scroll position) 
    var windowScrollTop = $(window).scrollTop(); 

    // Add or remove our sticky class on these conditions 
    if (windowScrollTop >= blogHeight || windowScrollTop <= sidebarTop){ 
     // Remove when the scroll is greater than our #content.OuterHeight() 
     // or when our sticky scroll is above the original position of the sidebar 
     $sidebar.removeClass('sticky'); 
    } 
    // Scroll is past the original position of sidebar 
    else if (windowScrollTop >= sidebarTop){ 
     // Otherwise add the sticky if $sidebar doesnt have it already! 
     if (!$sidebar.hasClass('sticky')){ 
      $sidebar.addClass('sticky'); 
     } 
    } 
} 

的HTML：

<header>This is the header!</header> 
<ul id="sidebar-nav" class="nav nav-list"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Blog</a></li> 
</ul> 
<div id="content">Content in here, scroll down to see the sticky in action!</div> 
<div class="clear"></div> 
<div id="footer">This is the #footer</div> 

的Ç SS：

/* Sticky our navbar on window scroll */ 
#sidebar-nav.sticky {position:fixed;top:5px;} 

/* Other styling for the html markup */ 
header { 
    border:1px solid #aaa; 
    background-color:yellow; 
    margin-bottom:5px; 
    height:50px; 
} 
#sidebar-nav { 
    width:150px; 
    border:1px solid #ddd; 
    margin:0; 
    padding:0; 
    float:left; 
} 
#sidebar-nav li { 
    list-style:none; 
    border:1px solid #ddd; 
    margin:10px; 
    padding:2px; 
} 
#content { 
    height:2000px; 
    width:500px; 
    padding:10px; 
    border:1px solid #ddd; 
    margin:0 0 10px 5px; 
    float:right; 
} 
#footer { 
    height:800px; 
    border:1px solid green; 
    background-color:#ddd; 
} 
.clear { 
    clear:both; 
} 

:)