CSS/JSで固定/スティッキーサイドバーを作成する方法は？

Question

メインコンテンツエリアとサイドバーがあるWebサイトを作成しようとしています。スタックオーバーフローのようなものです。目標は、スクロールダウンするとサイドバーが表示されたままになることです。私はこれに二つのアプローチを見てきました

：DOM

アプローチによる

1. position:fixed;
2. JavaScriptの操作なし。 1、私が知る限り、ビューポートがサイドバーの内容よりも小さいときに問題が発生するので、信頼できるように使用することはできません。また、私が見たJavaScriptスクリプトは通常アニメーション化されています。各スクロールの後に再描画が行われていること）。

   上記の問題に悩まされないJavScriptライブラリ/ CSSアプローチを指摘できますか？

   編集：例では、サイドバーは、アニメーションなしでトップにこだわり、サイドバーは、コンテンツ/ビューポートよりも高い場合、正しく状況を処理してthis pageしかしだろう。

Answer 1

あなたはクライアントウィンドウの高さをキャッチし、このようなあなたのサイドバーにそれを与えることができます：あなたはまた見ることができる

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

Here is a working JSFiddle.

：サイドバーのための適切なCSSで

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

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

をサイズ変更時に混乱を避けるためにウィンドウのサイズ変更用：Here is the way to go with jQuery

幸運

Answer 2

コードと、ここでのデモ：http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

Answer 3

私は重いJSソリューションを好きではないが、聞いてとても重要なことがある - 有利な互換性。あなたが同時にトップ&左/下&正しい値を持っている場合は、ボックスはなり

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

：IE8で、それはこの（純粋なCSS液）のような何かを行う代わりに、

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

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

$window.resize(); 

可能です+伸ばされた。 （）

Answer 4

これが表示されます。それは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

Answer 5

ないあなたはこの考え出したが、私が含まれている粘着性のサイドバーjQueryプラグインを作成しているか確認します。これは本当にシンプルで、jQueryの1行で呼び出すことができます。ここをクリックしてください：http://mojotech.github.com/stickymojo/

サイズ変更、スクロールを処理するためにjavascriptを使用し、交差させるべきではないフッター要素を指定することさえできます。これらのアプローチを組み合わせることで、滑らかな固定要素を得ることができます。さらに、私たちはあなたのために簡単にしました。