jqueryをスクロールして、上からpxカウントまでスクロールし、スクロールの残りの部分を上から固定するようにdivを設定します。

Question

divのCSSを変更するには、あるポイントまでスクロールするときに一定量ページの上部からのピクセル数。

ページの読み込みでは、divは静的に配置されます。私がページを下にスクロールし始めたら、私はトップからポイントを打つ（デモの目的で100pxと言っている）、その静的divを上から20pxのように固定するように変更したい。これはjqueryのcss（）プロパティを介して行われます。これは、それがその固定された20pxでページの一番下にとどまることを可能にします。

100pxのマークを押したときに知っているjqueryプロパティは何ですか？誰かが一番上に戻るとdivを元に戻して、ページがロードされたときの位置に戻し、上から20pxを戻さないようにする必要があります。

アイデア？

Answer 1

あなたは、あなたがどこにあるか確認するために、コードを実行するためにthe scroll() eventを使用し、the scrollTop() methodことができます。

はここでデモです：http://jsfiddle.net/EahRx/

（私はそれはあなたの実際のページに良くなります確信している私は、あなたが提供した値を使用するので、ジャンプがあります。。）

var fixed = false; 

$(document).scroll(function() { 
    if($(this).scrollTop() >= 100) { 
     if(!fixed) { 
      fixed = true; 
      $('#myDiv').css({position:'fixed',top:20}); // Or set top:20px; in CSS 
     }           // It won't matter when static 
    } else { 
     if(fixed) { 
      fixed = false; 
      $('#myDiv').css({position:'static'}); 
     } 
    } 
}); 

fixed変数は、.css()コードが必要以上に多く実行されるのを防ぎます。

Answer 2

はscrollTopスプライトを使用してみてください：

$(window).scroll(function(){ 
    if ($(window).scrollTop() >= 100){ 
     //CSS changes go here 
    } 
}); 

Answer 3

ここでは素敵なトリックを行い、オフセットの設定やcssの "attached"モードと "detached"モードの変更など、便利な機能を追加した素敵なjQueryプラグインを紹介します。

http://code.google.com/p/sticky-panel/

Answer 4

私はちょうどthisを見つけました。私はこれが本当に面白いと思う。私はそれが好き。