0

我正在尝试创建一个广告块/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 演示上？

4

1 回答 1

2

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

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

于 2012-04-04T11:34:32.453 回答