jqueryベースのスクロールバースクロール固定div(プレゼンテーションダウンロード付)
2917 ワード
例えば、淘宝商品の详细について、スクロールバーを下に引くと、商品の详细と评価そのnavが固定され、今では多くのサイトでもこのような効果がありますが、今はこれが流行していますか?元芳、どう思う?私もネットでコードを探して、何度も試しても気分が悪くて、多くのコードが乱れていて役に立たない.そこで、私は自分で1つ書いて、コードはとても簡単で、10数行しかありませんが、残念なことに、IE 6に互換性がありません.もし誰かがIE 6に互換性がある例があれば、教えてください.
直接コードを貼りましょう.
友情の注意:私はただ1つの簡単なDemoを提供して、実際の開発の中でDemoの中のものはやはり修正する必要があります.
オンラインプレゼンテーション:http://demo.jb51.net/js/2012/scrollfixed/
添付:Demoダウンロード
直接コードを貼りましょう.
demo
<br>$(document).ready(function(){
<br>var loaded = true;
<br>var top = $("#demo").offset().top;
<br>function Add_Data()
<br>{
<br>var scrolla=$(window).scrollTop();
<br>var cha=parseInt(top)-parseInt( scrolla);
<br>if(loaded && cha<=0)
<br>{
<br>$("#demo").removeClass("demo2").addClass("demo1");
<br>$("#demo").html(" , 。 。");
<br>loaded=false;
<br>}
<br>if(!loaded && cha>0)
<br>{
<br>$("#demo").removeClass("demo1").addClass("demo2");
<br>$("#demo").html(" , 。 。");
<br>loaded=true;
<br>}
<br>}
<br>$(window).scroll(Add_Data);
<br>});
<br>
, 。 。
友情の注意:私はただ1つの簡単なDemoを提供して、実際の開発の中でDemoの中のものはやはり修正する必要があります.
オンラインプレゼンテーション:http://demo.jb51.net/js/2012/scrollfixed/
添付:Demoダウンロード