【JQuery】htmlのclass名を書き換えてスタイル変更する方法

2017年3月29日

覚え書きです。

JQueryを使用し、今付けているclass名を変更する方法です。
ナビゲーションの固定の際、スクロール後のデザインを変更するときに使用しました。
他にも使えるシチュエーションが多いのではないかと思います。

$('div.nav').removeClass("nav").addClass("navW");

din.nav　の「nav」をremoveClassで一旦消して、新しく付けたいスタイルをもつ「navW」のクラス名を付け直しています。
あら、単純。
結構悩んだのにこれだけでした・・・

今回使ったコードの全文はこんな感じ
一番上に記載のif文はユーザーエージェントの判定です。

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){

$(function() {
$(window).on('load scroll', function(){
if ($(window).scrollTop() > 80) {
$('div.nav').removeClass("nav").addClass("navW");
} else {
$('div.navW').removeClass("navW").addClass("nav");
}
});
});

}