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

#socialサンプル コードと、jsFiddle、内部 div (など) には、テストが実行さ#text-2れるラッパー/コンテナー div があることに気付くでしょう。ライブ コードでは、このラッパーを省略し、同じ要素 ( ) で浮動クラスを設定し、scrollTop()両方をチェックしています。したがって、スクロールするたびに、条件が同じ要素をチェックし続けるため、クラス間でスワップします。例のように、別の div でラップし、その条件を実行する必要があります。scrollTop()#text-2scrollTop()#text-2

また、#text-2要素liはまだ親を持っていませんul。親を指定ulするか、に変更する必要がありdivます。そうしないと、無効な HTML になります。

于 2012-04-04T11:34:32.453 に答える