シングルページでのカレント表示jQueryについて

こちらのページ（http://www.tam-tam.co.jp/tipsnote/javascript/pos …）を参考に、シングルページ上でのカレント表示を実装し、動作も問題ありません。

ただ、contents01の上とcontents04の下にナビゲーションでリンクしていない要素があり、
contents01より上の要素が表示されている間は<a href="#contents01>がカレント表示のまま
contents04より下の要素が表示されている間は<a href="#contents04>がカレント表示のままになってしまいます

// 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
の下のifにelse if()でnavLink.removeClass('current');を追加すれば良いかと思うのですが、
（）の中へどう記述すれば良いのか困っています

どなたかご助力いただけませんでしょうか
よろしくお願い致します

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/06/20 15:41

こんにちは

ざっと見ただけですが・・・
現在のスクロール量が対象要素のtopとbottom位置の間にあれば、リスト内のそのリンクにcurrentクラスを付けるようになっていますので、それ以外の時はcurrentクラスを付けないようにしてあげれば宜しいかと。

スクリプト中で、該当する要素が存在したら
　navLink.removeClass('current');
　navLink.eq(i).addClass('current');
として、クラスの付け替えをしていますが、クラス削除の記述をfor文の前に持っていけば、
　「まず全体をクリアしておいて」→「該当要素があればクラスを付ける」
という処理手順に変わりますので、結果的に該当要素が無い時はクリアされたままになります。

ただし、全体のロジックが『「要素が見えていたら」ではなく「要素の中までスクロールをしたら」クラスを付与する』というようになっていますので、対象要素が連続していない一番最初のところではなんか違和感があるかも。
（もともとがそのような考え方で作られてはいるのですけれど…）

この回答へのお礼

早々にご回答いただきありがとうございます！大変たすかりました
クラスをまず消しておくという考えにいたらず、なるほど！となりました。
無事解決いたしました。本当にありがとうございました！

お礼日時：2016/06/23 16:04