Question

我正在尝试让广告块/ 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演示？

Answer 1

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

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

固定div一旦页面滚动闪烁

1 个答案: