エレベーターメニューをON／OFFの切り替えしたい

質問

下記ページを参考に、jQueryを使用してエレベーターメニューを作成しました。
http://cobs.jp/news/kachibito/2011/03/jquerycontained-sticky-scroll.html

デフォルトはスクロールしてもついてくる。
×ボタンを押すと、固定メニューに戻るようにするところまではできたのですが、
×ボタンを押したら×マークが○マークに変わり、
○マークを押すと再びエレベーターメニューに戻るようにしたいと思っています。

しかし、どこをどうさわったらよいのかわからず、苦戦しています。
どうしたらエレベーターメニューのON／OFFの切り替えができるのでしょうか。

また、ページが切り替わったあとでも、ONになっているか、OFFになっているかの設定は引き継げるようにしたいです。

よろしくお願いいたします。

回答No.2

JaneDue · ベストアンサー

画像の場合は <img タグにして、.text => .html にするとよいです。
例)
$("#mySliderSwitch").html("<img src='off.jpg' alt='スライド中止' />");

お礼

ありがとうございます！！
ずっと試行錯誤してうまくいかなかったプログラムが、
完成できました！！！

回答No.1

JaneDue

ざっと見てみましたが、あまり応用の効く書き方はしていないようです。
本体をいじるのはどうか分かりませんので以下でどうでしょう。( onOff()でクリック毎にcss,文字,cookieを変更しているだけですが )

1.option指定では unstick:false に。(オリジナルの×は表示無効にする)
2.自前のボタンを#sidebarの上あたりにでも入れる
<a href='javascript:mySlider.onOff();' id='mySliderSwitch'> </a>

3.以下追加 (htmlの下部がいいかも。適宜別ファイルにでも)
<script type="text/javascript">
var mySlider={
f:false,
set:function(){
this.f = $.cookie('un_slide') ? 1:0;
this.onOff();
},
onOff: function(){
this.f = this.f ? false:true;
if(this.f == true){
$("#sidebar").css("position", "relative");
$("#mySliderSwitch").text("×");
$.cookie("un_slide", null);
}else{
$("#sidebar").css("position", "static");
$("#mySliderSwitch").text("○");
$.cookie("un_slide", 1);
}
}
}
mySlider.set();
</script>

※設定の引継ぎに jquery.cookie.js使用。パスや有効期限等は適宜指定してください。

お礼

ありがとうございます。
無事、「○」「×」での切り替えができました。

ただ、一点。。。。
「○」「×」を画像にすることは可能でしょうか。

$("#mySliderSwitch").text("×");
を
$("#mySliderSwitch").img("off.jpg");
等にしてみたのですが、できませんでした。

何度もご迷惑をおかけいたしますが、
よろしくお願いいたします。