javascriptの記述方法おしえてください。

質問

以前こちらで質問し自己解決に至ったのですが、

もっと簡単スマートにスクリプトを記述したいのですが、

どのような記述をすれば良いかご教授ください。

//ここから

var flg1=1,flg2=0,flg3=0,flg4=0
　　$(window).on('scroll', function() {
　　　　if($('#contents01').offset().top <= $(window).scrollTop() && $('#contents02').offset().top-1 >= $(window).scrollTop()) {
if(flg1==0){
$('.nav1').stop(true,true).fadeTo(100,0.3).stop(true,true).fadeTo(500,1);
flg1=1,flg2=0,flg3=0,flg4=0
}
}
if($('#contents02').offset().top <= $(window).scrollTop() && $('#contents03').offset().top-1 >= $(window).scrollTop()) {
if(flg2==0){
$('.nav2').stop(true,true).fadeTo(100,0.3).stop(true,true).fadeTo(500,1);
flg1=0,flg2=1,flg3=0,flg4=0
}
}
if($('#contents03').offset().top <= $(window).scrollTop() && $('#contents04').offset().top-1 >= $(window).scrollTop()) {
if(flg3==0){
$('.nav3').stop(true,true).fadeTo(100,0.3).stop(true,true).fadeTo(500,1);
flg1=0,flg2=0,flg3=1,flg4=0
}
}
if($('#contents04').offset().top <= $(window).scrollTop() && $('#contents04').offset().top-1+$('#contents04').height() >= $(window).scrollTop()) {
if(flg4==0){
$('.nav4').stop(true,true).fadeTo(100,0.3).stop(true,true).fadeTo(500,1);
flg1=0,flg2=0,flg3=0,flg4=1
}
}
　　});

//ここまで

上記スクリプトは１部ですが、

このスクリプト部分で、

フラグを立てイベントを実行する、

しないの判別をさせています。

参考までに
http://www11.ocn.ne.jp/~website/sample2/index.htm

回答No.1

ONEONE · ベストアンサー

ifの条件がわかりにくいので、外に出してフラグ用の変数や判定用の関数を定義したほうが見やすいです。
同じ物も繰り返しが多いのでなるべくひとかたまりにしたいですね。

あんまりいいとは思えないけど、実装例です。
contentとnavを対応付けるようにマークアップして、関数で紐付けるというようなイメージです。

if(inView($obj)){
var nav_selector = getNavSelector($obj);
changeNavStatus(nav_selector);
}

こういうのは一般にScrollSpyというようですね。

自分の場合は、こういうのは自前で実装しないでライブラリを使っちゃいますねー。
http://iaarchiver.net/post/2012-03-14-1550

https://github.com/uikit/uikit/blob/master/src/js/scrollspy.js

お礼

ありがとうございます。
一般にScrollSpyって言うんですねｗｗ
ご教授頂いた実装例や、
紹介して頂いたライブラリを参考に、
学習したいと思います。