以前こちらで質問し自己解決に至ったのですが、
もっと簡単スマートにスクリプトを記述したいのですが、
どのような記述をすれば良いかご教授ください。
//ここから
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
}
}
});
//ここまで
上記スクリプトは1部ですが、
このスクリプト部分で、
フラグを立てイベントを実行する、
しないの判別をさせています。
参考までに
http://www11.ocn.ne.jp/~website/sample2/index.htm
No.1ベストアンサー
- 回答日時:
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/j …
ありがとうございます。
一般にScrollSpyって言うんですねww
ご教授頂いた実装例や、
紹介して頂いたライブラリを参考に、
学習したいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- Visual Basic(VBA) InputBoxでキャンセルボタンを押したらファイル自体を閉じたい 3 2022/07/23 17:52
- Visual Basic(VBA) 【Excel VBA】自動メール送信の機能追加 5 2022/09/29 12:53
- PHP php テーブルが作成できない 1 2022/11/17 23:41
- MySQL php テーブルを作れない 2 2022/11/17 18:22
- Visual Basic(VBA) オブジェクトが見つかりません 1 2023/06/24 19:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プログラムについて。
-
スマホ上で、左右スワイプで次...
-
初心者です。gulpでコンパイル...
-
プログラムがうまく動きません...
-
jsで質問です。 displayプロパ...
-
【Google Apps Script】「ライ...
-
console.logがどうしても2つ機...
-
指定時間になったら、WEBサイト...
-
Googleフォームで選択肢に応じ...
-
セレクトを全て選択されていな...
-
イラストレーター、縦中横のシ...
-
sessionStorageを調べています。
-
コードレビューをお願いします。
-
セレクトボックスで配列を呼び...
-
jsで、配列内の文章を改行する...
-
jQueryで同じクラス名のものを...
-
HTMLタグに複数のクラスを設定...
-
コードレビューをお願いします。
-
IndexedDB を使ってファイルア...
-
画面遷移を行わずに同一ページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Mac EclipseのFileReaderでファ...
-
Java バイナリデータの扱い
-
javaでファイルの読み込み
-
ユニオンクエリで開いたクエリ...
-
e-taxで送信ファイルの拡張子が...
-
サポートされたファイル形式お...
-
PDFファイルの倍率を変えて保存...
-
個別に違う添付ファイルを付け...
-
【VBA】マクロの入ったファイル...
-
Googleマップに保存した地点が...
-
スマホでtxtファイルを編集する...
-
エクセルで「特定の文字を含む...
-
A4の紙に印刷されている文字を...
-
Fortniteのクラッシュについて
-
ビデオファイルのプロパティの...
-
iPhoneの内蔵の記憶媒体は、HDD...
-
ガラケーからPCへの写真の取り込み
-
情けない話ですが成田エクスプ...
-
PC内で速度を遅くした音源をCD...
-
連続的に画像を受け取り、画像...
おすすめ情報