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'); 
   }
});

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

1 个答案: