固定 div 页面滚动后闪烁答案

【问题标题】：Fixed div once page is scrolled is flickering固定 div 页面滚动后闪烁
【发布时间】：2012-04-04 19:37:18
【问题描述】：

我正在尝试让广告块/div 在您向下滚动页面后切换到固定位置。

这是我正在尝试做的事情的演示以及我用来做这件事的代码......

http://jsfiddle.net/jasondavis/6vpA7/3/embedded/result/

在演示中，它可以完美地按照我想要的方式运行，但是当我在我的实时站点上实现它时，http://goo.gl/zuaZx 它可以正常工作，但是当您向下滚动时，每次滚动或向下滚动时，div 都会闪烁进出视图按键。在我的网站上实时查看问题是右侧边栏上显示“推荐书籍”的块

这是我正在使用的代码...

$(document).ready( function() {

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

} );

css

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

我的演示 jsfiddle 可以正常工作 http://jsfiddle.net/jasondavis/6vpA7/3/

在我的实时站点上唯一不同的是 div/id 名称不同。正如您所看到的，它在我的实时站点上有些工作，除了当您向下滚动页面时闪烁进出视图。

有人知道为什么这会发生在我的现场网站上而不是我的 jsfiddle 演示上吗？

【问题讨论】：

标签： javascript css

【解决方案1】：

您会注意到，在示例代码和您的 jsFiddle 中，您的内部 div（#social、#text-2 等）有一个包装器/容器 div，这是执行 scrollTop() 测试的地方。在您的实时代码中，您已经省略了这个包装器，并且您都在检查 scrollTop() 并在同一元素上设置浮动类 (#text-2)。所以每次滚动时，它都会在类之间交换，因为scrollTop() 条件会一直检查相同的元素。您需要将 #text-2 包装在另一个 div 中并在此基础上执行条件，就像在您的示例中一样。

另外，#text-2 是一个 li 元素，但没有父元素 ul。您应该给它一个父 ul 或将其更改为 div，否则它是无效的 HTML。

【讨论】：