ビューポートの上部にヒットした後、HTMLパネルをページに固定するにはどうすればよいですか？

Question

ブログポストのタイトルの横にあるソーシャルメディアパネルを作成しようとしています（ビューポートの上部から約200ピクセルほど）、ユーザーがページをスクロールしてパネルを固定したいソーシャルパネルの上部がビューポートの上部に当たったときにのみ表示されます。私がしようとしていることの一例は、Mashableのウェブサイトの投稿です（例：http://mashable.com/2011/12/05/facetones/）。コンテンツパネルの左側にあるソーシャルメディアパネルが、ブラウザビューポートの上部に当たるまでページとともにスクロールして固定される方法に注目してください。純粋なCSSや（より良い）jQueryでこれを行う方法を説明しているチュートリアルでは、自分で何も見つけられなかったので、大きな助けになります。私はちょうどそのようなことを探し始める方法を知りませんでした。

現在、コンテンツパネルの横のページに固定されたソーシャルメディアパネルを表示するためにHTML/CSSを設定する方法を理解しましたが、完全に動作しますが、ページをスクロールしてください上記のようにビューポートの上部に当たったときに固定されるようになりました。私のコードが現在行っているように、スクロールせずにページに正確に固定されています。ここに私のコードは、これまでのところです：

HTML：

<div id="fixed"> 

    <div id="sharebox-wrapper"> 

     <div id="sharebox"> 

      <div class="inner"> 

       share 

      </div> 

     </div> 

    </div> 

</div> 

CSS：

#fixed {position:fixed;} 
#sharebox-wrapper {position:relative;left:0px;top:0px;} 
#sharebox {width:100px;background:#F3F3F3 url(images/sharebox-bg.png) repeat-y right 0px;border:1px solid #CFCFCF;border-right:0px;position:absolute;left:-116px;top:25px;height:400px;} 
#sharebox .inner {padding:12px;} 

Answer 1

それは本当に非常に単純です。固定配置を記述するクラスを作成します。ウィンドウのスクロールイベントを監視します。ソーシャルメディアのトップが画面外に出る場合は、それを固定に切り替えます。そうでない場合は、それ自体を正常に配置してください。私はこれを書きましたが、うまくいくはずです。

http://jsfiddle.net/zpErD/1/

var mediaTop = $('div#sharebox-wrapper').offset().top; 
var media = $('div#sharebox-wrapper'); 

$(document).scroll(function() { 
    var scrollTop = $(document).scrollTop(); 

    //fix/unfix as necessary 
    if (mediaTop < scrollTop) { 
     $(media).addClass('fixed'); 
    } 
    else { 
     $(media).removeClass('fixed'); 
    } 
});