質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

スマホ上スクロール時に、要素を非表示にする

sh_azikikou
sh_azikikou

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

0クリップ

221閲覧

投稿2022/07/09 12:05

前提

ここに質問の内容を詳しく書いてください。
PHPでECサイトを作っています。
モバイル端末(768px未満)では上下スクロールの上スクロールした場合には、固定フッターメニューが消えるようにCSSとJavascriptを記述しました。
一部エリアでは上スクロール時にモバイルメニューが表示されて困っております。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • 上スクロール時の固定フッターメニューを非表示にする。

発生している問題・エラーメッセージ

写真のようにスマホ・iOS端末で上スクロール時に固定フッターメニューが現れるときがある。 本来は非表示になるべく書いたつもりですが条件分岐がうまく出来ていないようです。

イメージ説明

該当のソースコード

HTML

<div id="fix_bottom_menu"> <ul class="menu_list"> <li class="ec-footerBottomSP menu-item"><i class=""></i><span><i class="fas fa-bars"></i><span>メニュー</span></span></li> <li class="menu-item"> <a rel="noopener norefferrer" target="" href="https://40010monogatari.com/online/products/list?category_id=21&amp;name=&amp;grid=fix_bottom_sp"><i class=""></i><span><i class="fas fa-fish"></i><span>美味しい塩焼き</span></span></a></li> <li class="menu-item"> <a rel="noopener norefferrer" target="" href="https://40010monogatari.com/online/products/list?category_id=18&amp;name=&amp;grid=fix_bottom_sp"><i class=""></i><span><i class="fas fa-utensils"></i><span>土佐藩 鰹のたたき</span></span></a></li> <li class="menu-item ec-headerRole__cart"> <a rel="noopener norefferrer" target="" href="https://40010monogatari.com/online/cart?grid=fix_bottom_sp"> <i class="ec-cartNavi__icon fas fa-shopping-cart"></i><span>カート</span></a></li> </ul> </div> CSS .ec-blockTopBtn{ bottom: 55px } @media only screen and (max-width:767px){ [data-scrolled="true"] #fix_bottom_menu{bottom:0;position:fixed;bottom:0;height:50px;height:calc(50px + env(safe-area-inset-bottom));width: 100%;transition: bottom .4s;background:var(--main-bg);z-index:99} #fix_bottom_menu{box-shadow:0 0 4px rgba(0,0,0,.1);transition:bottom .2s all ease-in;width:100%;z-index:2s} #fix_bottom_menu:before{display:block;z-index:0} #fix_bottom_menu .menu_list{align-items:center;display:flex;height:50px;justify-content:space-between;padding:2px 0 0;position:relative;z-index:98} #fix_bottom_menu .menu_btn .open_btn{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)} #fix_bottom_menu .menu-item{flex:1 1 100%;margin:0;padding:0;text-align:center} #fix_bottom_menu .menu-item a{color:inherit;display:block;line-height:1;text-decoration:none} #fix_bottom_menu .menu-item i{color:inherit;display:block;font-size:20px;line-height:20px;text-align:center} #fix_bottom_menu .menu-item i:before{color:inherit;display:inline-block} #fix_bottom_menu .menu-item.pagetop_btn i{-webkit-transform:scale(1.4);transform:scale(1.4)} #fix_bottom_menu span{color:inherit;display:block;font-size:10px;line-height:1;margin-top:4px;width:100%;text-align:center}.fa-utensils:before{content:"\f2e7"} } @media(max-width:959px){ #fix_bottom_menu{display:block;padding-bottom:calc(env(safe-area-inset-bottom)*.5)}} @media only screen and (min-width:768px){ #fix_bottom_menu{display:none!important} } JAVASCRIPT /* * This file is part of EC-CUBE** Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.** http://www.ec-cube.co.jp/ ** For the full copyright and license information, please view the LICENSE* file that was distributed with this source code.*/ $(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(); if (window.innerWidth > 767) { if ($(".ec-orderRole").length) { var m = $(".ec-orderRole__summary"), k = $(".ec-orderRole").first(), n = k.offset().top, l = k.height(), h = l - n; var j = $(window).scrollTop(); if (j > n && j < l) { var i = j - n; m.css({ "margin-top": i }) } else { if (j < n) { m.css({ "margin-top": 0 }) } else { if (j > l) { m.css({ "margin-top": h }) } } } } } return false; }); $(".ec-headerNavSP").on("click", function () { $(".ec-layoutRole").toggleClass("is_active"); $(".ec-drawerRole").toggleClass("is_active"); $(".ec-drawerRoleClose").toggleClass("is_active"); $("body").attr("data-scrolled", "false"); $("body").toggleClass("have_curtain") }); $(".ec-footerBottomSP").on("click", function () { $(".ec-layoutRole").toggleClass("is_active"); $(".ec-drawerRole").toggleClass("is_active"); $(".ec-drawerRoleClose").toggleClass("is_active"); $("body").attr("data-scrolled", "false"); $("body").toggleClass("have_curtain"); $(".pagetop").fadeOut() }); $(".ec-overlayRole").on("click", function () { $("body").attr("data-scrolled", "false"); $("body").removeClass("have_curtain"); $(".ec-layoutRole").removeClass("is_active"); $(".ec-drawerRole").removeClass("is_active"); $(".ec-drawerRoleClose").removeClass("is_active") }); $(".ec-drawerRoleClose").on("click", function () { $("body").attr("data-scrolled", "false"); $("body").removeClass("have_curtain"); $(".ec-layoutRole").removeClass("is_active"); $(".ec-drawerRole").removeClass("is_active"); $(".ec-drawerRoleClose").removeClass("is_active") }); $(".ec-headerRole__cart").on("click", ".ec-cartNavi", function () { $(".ec-cartNaviIsset").toggleClass("is-active"); $(".ec-cartNaviNull").toggleClass("is-active") }); $(".ec-headerRole__cart").on("click", ".ec-cartNavi--cancel", function () { $(".ec-cartNaviIsset").toggleClass("is-active"); $(".ec-cartNaviNull").toggleClass("is-active") }); $(".ec-orderMail__link").on("click", function () { $(this).siblings(".ec-orderMail__body").slideToggle() }); $(".ec-orderMail__close").on("click", function () { $(this).parent().slideToggle() }); $(".is_inDrawer").each(function () { var b = $(this).html(); $(b).appendTo(".ec-drawerRole") }); $(".ec-blockTopBtn").on("click", function () { $("body").attr("data-scrolled", "false"); $("html,body").animate({ scrollTop: 0 }, 500) }); scroll = $(this).scrollTop(); $(".ec-itemNav ul a").click(function () { $("body").attr("data-scrolled", "false"); var b = $(this).siblings(); if (b.length > 0) { $(".sub").css("height", ""); if (b.is(":visible")) { return true } else { b.slideToggle(); return false } } }); $(".load-overlay").on({ click: function () { loadingOverlay() }, change: function () { loadingOverlay() } }); $(document).on("click", 'input[type="submit"], button[type="submit"]', function () { var c = true; var d = getAncestorOfTagType(this, "FORM"); if (typeof d !== "undefined" && !d.hasAttribute("novalidate")) { if (typeof d.checkValidity === "function") { c = d.checkValidity() } } if (c) { loadingOverlay() } }); $(".sub").css("height", ""); }); $(window).on("pageshow", function () { loadingOverlay("hide") }); function loadingOverlay(b) { if (b == "hide") { $(".bg-load-overlay").remove() } else { $overlay = $('<div class="bg-load-overlay">'); $("body").append($overlay) } } function getAncestorOfTagType(c, d) { while (c.parentNode && c.tagName !== d) { c = c.parentNode } return (d === c.tagName) ? c : undefined } $(function () { var b = function (e, f) { var a = $('<form action="' + e + '" method="post"></form>'); for (input in f) { if (f.hasOwnProperty(input)) { a.append('<input name="' + input + '" value="' + f[input] + '">') } } return a }; $("a[token-for-anchor]").click(function (e) { e.preventDefault(); var g = $(this); var h = g.data(); if (h.confirm != false) { if (!confirm(h.message ? h.message : eccube_lang["common.delete_confirm"])) { return false } } loadingOverlay(); var a = b(g.attr("href"), { _token: g.attr("token-for-anchor"), _method: h.method }).hide(); $("body").append(a); a.submit() }) });

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

EC-CUBE4系の利用です。
問題のサイトはコチラです。

ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Lhankor_Mhy

2022/07/11 03:00

ご提示のページを拝見しましたが、問題なく上スクロール時に非表示になっているように見えました。つまり、問題が再現しませんでした。 問題の共有が上手くできていないと思います。再現するためには何か条件があったり、限定されたデバイスのみで再現するのかもしれないです。 問題再現の手順をもう少し詳しく書いていただけますか?
sh_azikikou

2022/07/14 02:25

返信が遅くなり申し訳ありません。 詳細です。 ➊一番下迄フッターコンテンツ内の店名まで下スクロールする。 ➋ゆっくり上スクロールをする。 ❸場所として、 <div class="text"> ≀ ≀ </div> の下若しくは <div class="ec-layoutRole__contentBottom"> ≀ ≀ </div> の上エリアでフッターが浮き出ます。 ❹素早く動かすとあまり違和感がありませんが、ゆっくり動かすと固定フッターが画面真ん中に表示されて、モバイルメニューを展開した際にも表示され続けます。 UIがとても残念になります。
Lhankor_Mhy

2022/07/16 01:29

問題を把握しました。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。