スクロール量の取得 上下スクロールの判定が出来ない。
前提
ここに質問の内容を詳しく書いてください。
一定量スクロールしてから非表示
コチラを参考に➊トップへ戻るボタン並びに➋モバイルの固定フッターメニュー(WAI-ARIA 未対応)を作っています。
ですが、htmlやbody要素にover-flowプロパティを使っているためだと思うのですが、スクロール量の取得や上下判定が失敗している様です。
Body要素にプロパティを渡してCSSで切替しているためだと思います。
CSS
1data-scrolled, false(非表示) 2data-scrolled, True(表示)
特に➋において意図したとおりの判定が出来ておりません。
実現したいこと
300px以上と下スクロールの時には➋モバイル固定フッターを表示に、それ以外は➋を非表示にしたいです。
➊トップへ戻るボタンについて300px未満だと非表示にしたいです。
発生している問題・エラーメッセージ
上下スクロール判定が甘く、ともにちらつきが見える。
エラーメッセージ
該当のソースコード
Jquery(ソースの一部)
1 2$(function () { 3 var scroll = 0; 4 $(".pagetop").hide(2000, 'linear'); 5 6 $(window).on("scroll", function () { 7 if ($(this).scrollTop() < scroll && $(this).scrollTop() < 300) { 8 //上スクロールの時の処理 9 $("body").attr("data-scrolled", "false"); 10 $(".pagetop").fadeOut() 11 12 } else if ($(this).scrollTop() < scroll) { 13 //上スクロールの時の処理 14 $("body").attr("data-scrolled", "false"); 15 16 } else { 17 //下スクロールの時の処理 18 $("body").attr("data-scrolled", "true"); 19 $(".pagetop").fadeIn() 20 } 21 scroll = $(this).scrollTop(); 22}) 23}); 24 25
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
確認できるサイト
お忙しいところ恐縮ですが、何かしらヒントをいただけますと幸いです。
どうぞよろしくお願いいたします。🐈
回答1件
あなたの回答
tips
プレビュー