Q&A
フルスクリーンメニューでiPhoneのスクロールを止めたいです
現在jquery.fatNav.jsを使いフルスクリーンナビゲーションを使用しhtml書いています。
普段はcss等での実装でしたが
z-indexで多階層にしすぎiPhoneで正しく表示できなかった為、今回はライブラリを使用しています。
pc.androidではうまくいっているのですが。
iPhoneではスクロールを止めることができません。
また、画像が縦に伸びてしまい、今CSSの下部で無理やり崩れないように処理している為、どこを変えたら壊れないかご教授していただきたいです。
該当のソースコード
HTML
1<body> 2 <header class="main-header"> 3 <div class="fat-nav"> 4 <nav id="menu" class="page-nav fat-nav__wrapper"> 5 <ul> 6 <li><a href="">メニュー</a></li> 7 <li><a href="">メニュー</a></li> 8 <li><a href="">メニュー</a></li> 9 <li><a href="">メニュー</a></li> 10 <li><a href="">メニュー</a></li> 11 </ul> 12 </nav> 13 <img src="images/logo.png" width="125.7" height="35" alt="ロゴ"> 14 <div class="menu-container"> 15 <a class="hmenu" href="#"> 16 <span></span> 17 <span></span> 18 <span></span> 19 </a> 20 </div> 21 </div> 22 </header> 23 24 <section class="main-visual"> 25 <div class="main-img"> 26 <img src="images/l_logo.png" alt=""> 27 </div> 28 </section> 29 30 <div class="container"></div> 31<script> 32$(function() { 33 $.fatNav(); 34}()); 35 36$(function () { 37if (navigator.userAgent.indexOf('iPhone') > 0) { 38 let body = document.getElementsByTagName('body')[0]; 39 body.classList.add('iPhone'); 40} 41});</script> 42</body>
CSS
1 2.main-header { 3 z-index: 1; 4 position: fixed; 5 width: 100%; 6} 7 8.main-header ul { 9 justify-content: center; 10} 11 12header ul { 13 display: flex; 14} 15 16header li { 17 margin: 64px 42px; 18} 19 20.main-visual { 21 background-color: #888; 22 width: 100%; 23 height: 100vh; 24 display: table; 25 z-index: -1; 26} 27 28.main-img { 29 position: relative; 30 display: table-cell; 31 text-align: center; 32 vertical-align: middle; 33 width: 100%; 34} 35 36.main-img img { 37 width: 550px; 38} 39 40.container { 41 width: 100%; 42 height: 800px; 43} 44 45.main-header img{ 46 position: absolute; 47 top: 40px; 48 left: 0; 49 height: 60px; 50 display: none; 51} 52 53 54@media (max-width: 767px) { 55 56 .main-img img { 57 width: 270px; 58 } 59 60.main-header img{ 61 display: block; 62 top: 14px; 63 left: 14px; 64 height: 35px; 65 } 66 67 .iPhone .main-header img{ 68 max-width:125.7px!important; 69 max-height: 35px!important; 70 } 71 .iPhone .sub-header h3 { 72 max-height: 25px!important; 73 } 74 75}
fatNavcss
1@media (max-width: 767px) { 2 3.hamburger { 4 display: block; 5 width: 50px; 6 height: 50px; 7 position: fixed; 8 top: 7px; 9 right: 15px; 10 z-index: 10000; 11 padding: 12px; 12 box-sizing: border-box; 13 touch-action: manipulation; 14} 15.hamburger__icon { 16 position: relative; 17 margin-top: 8px; 18 margin-bottom: 8px; 19} 20.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { 21 display: block; 22 width: 26px; 23 height: 3px; 24 background-color: #aaaaaa; 25 border-radius: 4px; 26 transition-property: background-color, transform; 27 transition-duration: 0.4s; 28} 29.hamburger__icon:before, .hamburger__icon:after { 30 position: absolute; 31 content: ""; 32} 33.hamburger__icon:before { 34 top: -8px; 35} 36.hamburger__icon:after { 37 top: 8px; 38} 39.hamburger.active .hamburger__icon { 40 background-color: transparent; 41} 42.sub .hamburger.active .hamburger__icon:before,.sub .hamburger.active .hamburger__icon:after { 43 background-color: #fff; 44} 45 46.hamburger.active .hamburger__icon:before { 47 transform: translateY(8px) rotate(45deg); 48} 49.hamburger.active .hamburger__icon:after { 50 transform: translateY(-8px) rotate(-45deg); 51} 52 53.fat-nav { 54 top: 0; 55 left: 0; 56 z-index: 9999; 57 position: fixed; 58 display: none; 59 width: 100%; 60 height: 100%; 61 overflow-y: auto; 62 overflow-x: hidden; 63 64} 65 .main-header .fat-nav{ 66 background: rgba(255, 255, 255, 0.91); 67 color: #a9a9a9!important; 68 } 69 .main-header .fat-nav li a, 70 .main-header .fat-nav li{ 71 color: #a9a9a9!important; 72 } 73 74.fat-nav__wrapper { 75 width: 100%; 76 height: 100%; 77 display: table; 78 table-layout: fixed; 79} 80 81.fat-nav ul { 82 display: table-cell; 83 vertical-align: middle; 84 margin: 0; 85 padding: 0; 86} 87.fat-nav li { 88 list-style-type: none; 89 text-align: center; 90 padding: 10px; 91 font-size: 2em; 92 margin: auto; 93 transition: .6s 0.2s; 94} 95.fat-nav li, .fat-nav li a { 96 color: #ddd; 97} 98.fat-nav li a { 99 text-decoration: none; 100} 101}
fatNavjs
1!function(a,b,c){function d(b){this.settings=a.extend({},f,b),this._defaults=f,this._name=e,this.init()}var e="fatNav",f={};a.extend(d.prototype,{init:function(){var b=this,c=this.$nav=a(".fat-nav"),d=this.$hamburger=a('<a href="javascript:void(0)" class="hamburger"><div class="hamburger__icon"></div></a>');this._bodyOverflow=a("body").css("overflow"),navigator.userAgent.match(/(iPad|iPhone|iPod)/g)&&c.children().css({height:"110%",transform:"translateY(-5%)"}),a("body").append(d),a().add(d).add(c.find("a")).on("click",function(a){b.toggleNav()})},toggleNav:function(){var b=this;this.$nav.fadeToggle(400),b.toggleBodyOverflow(),a().add(this.$hamburger).add(this.$nav).toggleClass("active")},toggleBodyOverflow:function(){var b=this,c=a("body");c.toggleClass("no-scroll");var d=c.hasClass("no-scroll");c.css("overflow",d?"hidden":b._bodyOverflow)}}),"undefined"==typeof a[e]&&(a[e]=function(a){return new d(this,a)})}(jQuery,window,document);
色々スクロール止める方法書いてあったのですが、
ナビメニューがjsのため、うまく使うことができなかったり、
一時的だけ止まる、ボタンが選択できない、画像が動く、などで結局うまくできませんでした。
TOP以外のページでは、メニュー開閉にかかわらずロゴ画像をその位置に置いているので,
アニメーションを止めて実装していますので、fatNav.css全文も載せています。
###追記
<header class="main-header fat-nav"> <nav id="menu" class="page-nav fat-nav__wrapper">
公式通り上記のようにすることで一応スクロールはとまりましたが
nav部分が下記のようになってしまい。
element.style { height: 110%; transform: translateY(-5%); }
となってしまい少しだけ動いてしまします。これは公式のライブラリの一瞬ズームする為の処理なのでしょうか？
ご教授していただけたら助かります。
あなたの回答
tips
プレビュー
