divをページの一番上に達するとページを下にスクロールさせる方法は？

Question

私はタイトルが少し混乱していることを知っていますが、基本的に私がしたいことは、このウェブサイトで明確に示されていますhttp://9gag.comスクロールしてサイドバーに注意を払うと、2回目の広告があります。ページ。

どうすればいいですか？ html/cssまたはjQueryのソリューションが事前に用意されています。

Answer 1

Kevinは指摘するとおり、ドキュメントのscrollイベントを聞くことが必要です。それが解雇されたら、scrollTopの値を見たいと思うでしょう。

$(document).scroll(function() { 

    var useFixedSidebar = $(document).scrollTop() >= myThresholdValue; 
    $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar); 

}); 

そして、あなたのCSSは、基本的に次のようになります。

.my-sidebar-items.fixedSidebar { position: fixed; } 

の複雑な要因は、おそらくアイテムは彼らの新しい、トップの位置に固定することにしたいだろうということで、あなたはしたいと思います

.my-sidebar-items.fixedSidebar { position: fixed; top: 0 } 

しかし、おそらくお互いの上にアイテムが積み重なるでしょう。それに対する解決策は、fixedSidebarクラスをコンテナに置き、説明されているようにクラスを使用することです。

Demo

Answer 2

あなたは最も簡単な方法は、scrollTopスプライトが一定量を超えて取得するときに、その後にクラスを追加し、bodyタグのスクロールイベントに耳を傾けることである粘着性のバーhttp://archive.plugins.jquery.com/plugin-tags/stickyやjQueryのウェイポイントhttp://imakewebthings.github.com/jquery-waypoints/