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