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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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ブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

723閲覧

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

sh_azikikou

総合スコア16

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ブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/07/09 12:05

前提

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

実現したいこと

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

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

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

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

イメージ説明

該当のソースコード

HTML

1 2<div id="fix_bottom_menu"> 3<ul class="menu_list"> 4<li class="ec-footerBottomSP menu-item"><i class=""></i><span><i class="fas fa-bars"></i><span>メニュー</span></span></li> 5<li class="menu-item"> 6<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> 7<li class="menu-item"> 8<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> 9<li class="menu-item ec-headerRole__cart"> 10<a rel="noopener norefferrer" target="" href="https://40010monogatari.com/online/cart?grid=fix_bottom_sp"> 11<i class="ec-cartNavi__icon fas fa-shopping-cart"></i><span>カート</span></a></li> 12</ul> 13</div> 14 15 16 17 18CSS 19 20.ec-blockTopBtn{ 21bottom: 55px 22} 23@media only screen and (max-width:767px){ 24[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"} 25} 26@media(max-width:959px){ #fix_bottom_menu{display:block;padding-bottom:calc(env(safe-area-inset-bottom)*.5)}} 27@media only screen and (min-width:768px){ 28 #fix_bottom_menu{display:none!important} 29} 30 31 32 33JAVASCRIPT 34 35/* * 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.*/ 36$(function () { 37 var scroll = 0; 38 $(".pagetop").hide(2000, 'linear'); 39 40 $(window).on("scroll", function () { 41 if ($(this).scrollTop() < scroll && $(this).scrollTop() < 300) { 42 //上スクロールの時の処理 43 $("body").attr("data-scrolled", "false"); 44 $(".pagetop").fadeOut() 45 46 } else if ($(this).scrollTop() < scroll) { 47 //上スクロールの時の処理 48 $("body").attr("data-scrolled", "false"); 49 50 } else { 51 //下スクロールの時の処理 52 $("body").attr("data-scrolled", "true"); 53 $(".pagetop").fadeIn() 54 } 55 scroll = $(this).scrollTop(); 56 57 if (window.innerWidth > 767) { 58 if ($(".ec-orderRole").length) { 59 var m = $(".ec-orderRole__summary"), 60 k = $(".ec-orderRole").first(), 61 n = k.offset().top, 62 l = k.height(), 63 h = l - n; 64 var j = $(window).scrollTop(); 65 if (j > n && j < l) { 66 var i = j - n; 67 m.css({ 68 "margin-top": i 69 }) 70 } else { 71 if (j < n) { 72 m.css({ 73 "margin-top": 0 74 }) 75 } else { 76 if (j > l) { 77 m.css({ 78 "margin-top": h 79 }) 80 } 81 } 82 } 83 } 84 } 85 return false; 86 }); 87 $(".ec-headerNavSP").on("click", function () { 88 $(".ec-layoutRole").toggleClass("is_active"); 89 $(".ec-drawerRole").toggleClass("is_active"); 90 $(".ec-drawerRoleClose").toggleClass("is_active"); 91 $("body").attr("data-scrolled", "false"); 92 $("body").toggleClass("have_curtain") 93 }); 94 $(".ec-footerBottomSP").on("click", function () { 95 $(".ec-layoutRole").toggleClass("is_active"); 96 $(".ec-drawerRole").toggleClass("is_active"); 97 $(".ec-drawerRoleClose").toggleClass("is_active"); 98 $("body").attr("data-scrolled", "false"); 99 $("body").toggleClass("have_curtain"); 100 $(".pagetop").fadeOut() 101 }); 102 $(".ec-overlayRole").on("click", function () { 103 $("body").attr("data-scrolled", "false"); 104 $("body").removeClass("have_curtain"); 105 $(".ec-layoutRole").removeClass("is_active"); 106 $(".ec-drawerRole").removeClass("is_active"); 107 $(".ec-drawerRoleClose").removeClass("is_active") 108 }); 109 $(".ec-drawerRoleClose").on("click", function () { 110 $("body").attr("data-scrolled", "false"); 111 $("body").removeClass("have_curtain"); 112 $(".ec-layoutRole").removeClass("is_active"); 113 $(".ec-drawerRole").removeClass("is_active"); 114 $(".ec-drawerRoleClose").removeClass("is_active") 115 }); 116 $(".ec-headerRole__cart").on("click", ".ec-cartNavi", function () { 117 $(".ec-cartNaviIsset").toggleClass("is-active"); 118 $(".ec-cartNaviNull").toggleClass("is-active") 119 }); 120 $(".ec-headerRole__cart").on("click", ".ec-cartNavi--cancel", function () { 121 $(".ec-cartNaviIsset").toggleClass("is-active"); 122 $(".ec-cartNaviNull").toggleClass("is-active") 123 }); 124 $(".ec-orderMail__link").on("click", function () { 125 $(this).siblings(".ec-orderMail__body").slideToggle() 126 }); 127 $(".ec-orderMail__close").on("click", function () { 128 $(this).parent().slideToggle() 129 }); 130 $(".is_inDrawer").each(function () { 131 var b = $(this).html(); 132 $(b).appendTo(".ec-drawerRole") 133 }); 134 $(".ec-blockTopBtn").on("click", function () { 135 $("body").attr("data-scrolled", "false"); 136 $("html,body").animate({ 137 scrollTop: 0 138 }, 500) 139 }); 140 scroll = $(this).scrollTop(); 141 $(".ec-itemNav ul a").click(function () { 142 $("body").attr("data-scrolled", "false"); 143 var b = $(this).siblings(); 144 if (b.length > 0) { 145 $(".sub").css("height", ""); 146 if (b.is(":visible")) { 147 return true 148 } else { 149 b.slideToggle(); 150 return false 151 } 152 } 153 }); 154 $(".load-overlay").on({ 155 click: function () { 156 loadingOverlay() 157 }, 158 change: function () { 159 loadingOverlay() 160 } 161 }); 162 $(document).on("click", 'input[type="submit"], button[type="submit"]', function () { 163 var c = true; 164 var d = getAncestorOfTagType(this, "FORM"); 165 if (typeof d !== "undefined" && !d.hasAttribute("novalidate")) { 166 if (typeof d.checkValidity === "function") { 167 c = d.checkValidity() 168 } 169 } 170 if (c) { 171 loadingOverlay() 172 } 173 }); 174 $(".sub").css("height", ""); 175 176 }); 177 $(window).on("pageshow", function () { 178 loadingOverlay("hide") 179 }); 180 181 function loadingOverlay(b) { 182 if (b == "hide") { 183 $(".bg-load-overlay").remove() 184 } else { 185 $overlay = $('<div class="bg-load-overlay">'); 186 $("body").append($overlay) 187 } 188 } 189 190 function getAncestorOfTagType(c, d) { 191 while (c.parentNode && c.tagName !== d) { 192 c = c.parentNode 193 } 194 return (d === c.tagName) ? c : undefined 195 } 196 $(function () { 197 var b = function (e, f) { 198 var a = $('<form action="' + e + '" method="post"></form>'); 199 for (input in f) { 200 if (f.hasOwnProperty(input)) { 201 a.append('<input name="' + input + '" value="' + f[input] + '">') 202 } 203 } 204 return a 205 }; 206 $("a[token-for-anchor]").click(function (e) { 207 e.preventDefault(); 208 var g = $(this); 209 var h = g.data(); 210 if (h.confirm != false) { 211 if (!confirm(h.message ? h.message : eccube_lang["common.delete_confirm"])) { 212 return false 213 } 214 } 215 loadingOverlay(); 216 var a = b(g.attr("href"), { 217 _token: g.attr("token-for-anchor"), 218 _method: h.method 219 }).hide(); 220 $("body").append(a); 221 a.submit() 222 }) 223 });

試したこと

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

問題を把握しました。
guest

回答1

0

ベストアンサー

css

1[data-scrolled="true"] #fix_bottom_menu { 2 bottom: 0; 3 position: fixed; 4 /* bottom: 0; */ 5 /* height: 50px; */ 6 height: calc(50px + env(safe-area-inset-bottom)); 7 width: 100%; 8 transition: bottom .4s; 9 background: var(--main-bg); 10 z-index: 99; 11 display: block; 12} 13 14#fix_bottom_menu { 15 /* display: block; */ 16 padding-bottom: calc(env(safe-area-inset-bottom)*.5); 17 display: none; 18}

などとして、表示を消してみてはどうでしょうか?

投稿2022/07/16 01:29

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sh_azikikou

2022/07/16 04:13

少し調整しましたが、大元はいただいた内容で解決しました。お時間いただきありがとうございます。本当に感謝です🐈
sh_azikikou

2022/07/19 12:18

追記 難しく考えずに、こちらでも対応できました。ありがとうございます。🐈 [data-scrolled="false"] #fix_bottom_menu{display:none}
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問