如何在CSS/JS中創建固定/粘性邊欄？

我想創建一個網站，主要內容區域和一個側欄，就像這裏堆棧溢出。目標是當你向下滾動時，邊欄保持可見。如何在CSS/JS中創建固定/粘性邊欄？

我已經看到了兩種方法來這樣：

position:fixed;
JavaScript操作與DOM

方法沒有。 1，據我所知，當視口小於側邊欄內容時會有問題，所以我認爲這不能可靠地使用，我看到的JavaScript腳本通常是動畫或通常「慢」（您可以看到每次滾動之後都會重新繪製）。

有人可以指出一個JavScript庫/ CSS的方法，不會遭受上述問題？

編輯：一個例子是this page但與側欄粘到頂部不具有動畫和正確處理的情況時，側邊欄比含量/視口高。

來源

2012-03-11 Borek

您是否嘗試過使用javascript檢索窗口的高度，然後將此高度置於'position：fixed'上的側欄中，並使用符合您需要的「overflow」？ – rayfranco 2012-03-11 19:16:12

這可能工作，好主意。 – Borek 2012-03-11 19:18:36

對不起，我現在可能沒有時間去試驗這個，但稍後會嘗試回來。如果你有一個可行的例子，它會加快速度。 – Borek 2012-03-11 21:43:17

你能趕上客戶端窗口的高度，並把它給你的側邊欄是這樣的：

var sidebarHeight = $(window).innerHeight(); 

$('#sidebar').css('height',sidebarHeight);

隨着側邊欄的正確CSS：

#sidebar { 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 200px; 
    overflow: hidden; 
}

Here is a working JSFiddle.

你也可以看用於窗口大小調整以避免調整大小:) Here is the way to go with jQuery

好運

來源

2012-03-11 19:31:09 rayfranco

我也建議閱讀一些關於css3媒體查詢，以防萬一。這裏有一篇很棒的文章：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps – Chango 2012-03-11 19:35:55

代碼和演示在這裏：http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

來源

2012-03-11 21:03:46

這個解決方案也存在問題1，也就是說，當邊欄高於頁面內容和視口時，一些其內容無法訪問。 – Borek 2012-03-11 21:14:42

我不喜歡沉重的JS解決方案，問這麼重要的事情是 - 最佳兼容性。在IE8 +有可能的，而不是

var $window = $(window), 
    $sidebar = $(sidebar); 

$window.on('resize', function(){ 
    $sidebar.height($window.innerHeight()); 
}); 

$window.resize();

做這樣的事情（純CSS解決方案）：

#sidebar { 
    position: fixed; 
    left: 0; /* or right */ 
    top: 0; 
    bottom: 0; 
    overflow: auto; 
}

當你有頂級&底部/在同一時間離開&正確的價值，盒會拉伸。（JSFiddle demo）

來源

2012-03-11 21:54:09

謝謝，這肯定比根本無法訪問側邊欄內容更好，但是有沒有一種解決方案可以使用主滾動條，而不是僅爲側欄添加專門的滾動條？例如，如果在此頁面上http://jsfiddle.net/h9XEc/1/上，滾動條位於結果框的右側，而不是側邊欄中。 – Borek 2012-03-11 22:09:00

明白了。這是基於Javascript的，但我相信這沒什麼重要的，甚至IE8應該解決它很好。

var top = $('#sidebar').offset().top; 
var height = $('#sidebar').height(); 
var winHeight = $(window).height(); 
var gap = 10; 
$(window).scroll(function(event) { 
    var scrollTop = $(this).scrollTop(); 

    // sidebar reached the (end - viewport height) 
    if (scrollTop + winHeight >= top + height + gap) { 
     // if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation 
     $('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px'); 
    } else { 
     // otherwise remove it 
     $('#sidebar').removeClass('fixed').css('top', '0px'); 
    } 
});

demo

來源

2012-03-11 22:38:15

不知道你有這個想通了，但我已經創建了一個包含粘側邊欄的jQuery插件。這非常簡單，只需要一行jQuery即可調用。看看這裏：http://mojotech.github.com/stickymojo/

它開始的位置：固定;然後使用JavaScript來處理任何大小，滾動，甚至允許您指定它不應該相交的頁腳元素。通過結合這些方法，您將獲得平滑的固定元素。另外，我們爲您提供了方便。

來源

2012-07-16 22:30:42

儘量讓瀏覽器高50px。你如何訪問側邊欄中的下載按鈕？ – Borek 2012-07-17 06:11:33

如何在CSS/JS中創建固定/粘性邊欄？

回答

相關問題