如何在页面到达视口顶部后将HTML面板修复到页面？

Question

我正在尝试创建一个位于博客文章标题旁边的社交媒体面板(从视口顶部约200px左右),当用户向下滚动页面时,我希望面板只有固定位置当社交面板的顶部命中视口的顶部时.我正在尝试做的一个例子是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'); 
   }
});