15/05/16 01:39:13.60 +UC07Y5W.net
>>57はあまり良くないので訂正する。
その前に、>>55のコードは無駄があるので先に綺麗にしておく。
$(function() {
$(window).scroll( function() {
var enabled = $(this).scrollTop() > $("#fixedNavi").top;
navBox.toggleClass("fixBox", enabled);
}
});
まず見た目の話なので、クラスを使う。
ボタンが押された時に、bodyにクラスをつけたり外したりする。
$('#btn').click(function() {
$('body').toggleClass('scroll-bar-fixed');
});
fixBoxクラスの有無でCSSでスクロールバーの固定を行っていると思うが、
あとはCSSをちょこっと書き換えて、
fixBox { 省略 } // スクロールバーの固定解除モード
scroll-bar-fixed fixBox { 省略 } // スクロールバーの固定モード
のような感じで制御できる。
重要なのは、JavaScriptではクラスを使った"モード"の変移のみを行い、
それによって変わる見た目は、CSSを使う言うこと。
これをしないとJavaScriptのコードがすぐに複雑になってしまう。