2011-12-21 16 views
0

に役立つならば、私はすでに投稿されていた私はこれを見つけた感謝のスクロール位置に応じて、アクティブなクラスを追加したい:jQueryのelseと文はスクロール位置

jQuery : add css class to menu item based on browser scroller position

私は余分なナビゲーションアイテムを持っているがこのチュートリアルでは、if、else ifおよびelse文をどのように配置するのか分かりません。

$(window).scroll(function() {  
// find the li with class 'active' and remove it 
$("#navigation li.active").removeClass("active"); 
// get the amount the window has scrolled 
var scroll = $(window).scrollTop(); 
// add the 'active' class to the correct li based on the scroll amount 
if (scroll <= 500) { 
    $("#nav-welcome").addClass("active"); 
} 
else if (scroll <= 1000) { 
    $("#nav-about").addClass("active-purple"); 
} 
else if (scroll <= 1500) { 
    $("#nav-portfolio").addClass("active"); 
} 
else { 
    $("#nav-contact").addClass("active-purple"); 
} 
}); 

私は2つのifsを使用した2つのアクティブなクラスを取得しています。

事前に感謝します。

答えて

1

これを試してみてください:返信用

if (scroll >= 1500) { 
    $("#nav-portfolio").addClass("active"); 
} else if (scroll >= 1000) { 
    $("#nav-about").addClass("active-purple"); 
} else if (scroll >= 500) { 
    $("#nav-welcome").addClass("active"); 
} else { 
    $("#nav-contact").addClass("active-purple"); 
} 
+0

感謝を。それは部分的に働いていますが、最後のelse文(nav-welcomeとnav-aboutの間でのnav-contactスクロール)を起動していて、スクロールバックするとnav-welcomeの代わりにnav-contactを起動します。 – sarah3585

+0

あなたが設定した方法は混乱していました。あなたがページの一番上にいるとき、何をしたいのですか? –

関連する問題