要素のスクロール（スティッキー要素）を行ったときに要素の属性を変更するには

Question

たとえば、http://twitter.github.com/bootstrap/base-css.htmlをスクロールしてみます。あなたは要素を渡すスクロールするとき、それは要素の変更を行うためにクラスを追加します

「Glyphiconsによってボタンのアイコンをフォームタイポグラフィコード表」

とバーが表示されます。スクロールしている間は、属性を削除して要素を再度変更します。

編集：これはSticky Elementと呼ばれています。彼らはここでは、この

$(".subnav").addClass("subnav-fixed"); 

ためaddClass（）関数を使用している

Answer 1

ようなものになることがあります。彼らが追跡している

someElements.waypoint(function(event, direction) { 
    if (direction === 'down') { 
     // do this on the way down 
    } 
    else { 
     // do this on the way back up through the waypoint 
    } 
}); 

乾杯

Answer 2

は、彼らがこの

function processScroll() { 
    var i, scrollTop = $win.scrollTop() //get the scroll position of the window object 
    if (scrollTop >= navTop && !isFixed) { //check if its position is higher that the position of the navigation 
    isFixed = 1 //if yes fix it 
    $nav.addClass('subnav-fixed') 
} else if (scrollTop <= navTop && isFixed) { //if is not higher then 
    isFixed = 0 
    $nav.removeClass('subnav-fixed') //un fix it 
} 
} 

に使用している彼らは、ドキュメントのスクロールイベントに、この関数を呼び出す機能です。 jQueryプラグインは、あなたがやりたいことができ

$(document).scroll(function() { 
    processScroll(); 
}); 

Answer 3

：http://imakewebthings.com/jquery-waypoints/

そして、ここではURLから取らexempleですスクロール位置とli要素のクラスの変更

あなたが見ているサブナビゲーションバーは、ulとli要素を使って実装されています。火かき棒から見ることができます：

<div class="subnav subnav-fixed"> 
    <ul class="nav nav-pills"> 
     <li class=""><a href="#typography">Typography</a></li> 
     <li class=""><a href="#code">Code</a></li> 
     <li class="active"><a href="#tables">Tables</a></li> 
     <li class=""><a href="#forms">Forms</a></li> 
     <li class=""><a href="#buttons">Buttons</a></li> 
     <li class=""><a href="#icons">Icons by Glyphicons</a></li> 
    </ul> 
    </div> 

アクティブにしたいナビゲーション要素のclass = 'active'の設定方法に注目してください。

Jqueryでは、li要素を選択してクラスを変更する必要があります。 が http://api.jquery.com/category/selectors/

は、クラスを変更するにはを参照してくださいあなたが（ID、子セレクタ、クラスセレクタなどで）したい要素を選択する多くの方法があり、あなたは、要素のクラスを操作するためtoggleClass、addClassとremoveClassの機能を使用することができますあなたが例えば

をしたい、あなたはそれが選択した要素内のすべてのテキストを探しますので、:containsは少し重いかもしれないと

//remove any active elements 
$("ul.nav > li").removeClass("active"); 
//Make the 'Tables' subnav element active 
$("ul.nav > li:contains('Tables')").addClass("active"); 

注意を行うことができます。そのないページに、あなたが考えさせるhttp://api.jquery.com/nth-child-selector/

$("ul.nav li:eq(2)").addClass("active");