Javascript 固定div一旦页面被滚动就会闪烁

我试图有一个广告块/div，将切换到一个固定的位置，一旦你向下滚动页面

这里是我正在尝试做的一个演示，以及我正在使用的代码

在演示中，它完美地实现了我所希望的效果，但是当我在我的实时站点上实现它时，它可以工作，但是当你向下滚动时，div在每次滚动或按下向下键时都会在视图中闪烁。在我的网站上，要想看到这个问题，右边栏上的一块写着“推荐书”

这是我正在使用的代码

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#social-container').offset().top)
            $('#social').addClass('floating');
        else
            $('#social').removeClass('floating');
    } );

} );​

css

我的演示jsfiddle在哪里可以正常工作

在我的live站点上唯一不同的是div/id名称不同。正如你所看到的，它在我的实时网站上运行得很好，除了当你向下滚动页面时，在视图中忽隐忽现

---

有人知道为什么这会发生在我的实时站点而不是我的JSFIDLE演示上吗？

您会注意到，在示例代码和您的JSFIDLE中，您的内部div（

#social

，

#text-2

等）有一个包装器/容器div，这是执行

scrollTop（）

测试的地方。在您的实时代码中，您已经使用了这个包装器，并且您正在检查

scrollTop（）

并在同一元素上设置浮动类（

#text-2

）。因此，每次滚动时，它都会在类之间交换，因为

scrollTop（）

conditional会不断检查相同的元素。您需要将

#text-2

包装到另一个div中，并在此基础上执行条件，就像您的示例中一样

另外，

#text-2

是一个

li

元素，但没有父元素

ul

。您应该给它一个父级

ul

，或者将其更改为

div

，否则它是无效的HTML

#social.floating {
    position: fixed;
    top: 0;
}​