スクロールのスクリプトを入れるとハンバーガーメニューが効かなくなってしましました。
何かが競合しているのでしょうか?
解決策をご教授お願いいたします。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>無題ドキュメント</title> 6 <style> 7 #menu-wrap { 8 position: fixed; 9 top: 0; 10 width: 100%; 11 height: 50px; 12 z-index: 19; 13 background-color: #61a951; 14} 15.menu-trigger, .menu-trigger span { 16 display: inline-block; 17 transition: all .4s; 18 box-sizing: border-box; 19 cursor : pointer; 20} 21.menu-trigger { 22 position: fixed; 23 top: -5px; 24 right: 10px; 25 width: 35px; 26 height: 56px; 27 z-index: 20; 28} 29.menu-trigger span { 30 position: absolute; 31 background: #fff; 32 width: 35px; 33 height: 2px; 34 margin: auto; 35} 36.menu-trigger span:nth-of-type(1) { 37 top: 15px; 38} 39.menu-trigger span:nth-of-type(2) { 40 top: 0; 41 bottom: 0; 42} 43.menu-trigger span:nth-of-type(3) { 44 bottom: 15px; 45} 46.menu-trigger.active span:nth-of-type(1) { 47 -webkit-transform: translateY(12px) rotate(-45deg); 48 transform: translateY(12px) rotate(-45deg); 49} 50.menu-trigger.active span:nth-of-type(2) { 51 opacity: 0; 52} 53.menu-trigger.active span:nth-of-type(3) { 54 -webkit-transform: translateY(-12px) rotate(45deg); 55 transform: translateY(-12px) rotate(45deg); 56} 57.g-nav { 58 display: none; 59 position: fixed; 60 top: 0; 61 right: 0; 62 background:#ccc; 63 width: 100%; 64 height: 80%; 65 opacity: .98; 66 z-index: 10; 67} 68.list { 69 padding: 0px; 70 width: 80%; 71 margin: 10px auto; 72 margin-top: 10px; 73 list-style: none; 74 overflow-y: scroll; 75 -webkit-overflow-scrolling: touch; 76} 77.list .item { 78 border-bottom: 1px solid #000; 79} 80.item a { 81 display: block; 82 text-decoration: none; 83 color: #000; 84 padding: 25px 0 5px; 85 font-size: 1rem; 86 font-weight: 900; 87} 88.cont{ 89 width:100vw; 90 height:1000px; 91} 92 </style> 93 94 95<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 96 <script> 97 //ハンバーガーメニューのトリガー 98 $(function(){ 99 $('.menu-trigger').on('click',function(){ 100 $(this).toggleClass('active'); 101 $('.g-nav').slideToggle(); 102 }); 103 }); 104//※ここが効かなくなる 105$(function(){ 106$('.list li').on('click', function() { 107 $('.menu-trigger').removeClass('active'); 108 $('.g-nav').slideToggle(); 109}); 110}); 111 112 113//ヘッダーの高さ分だけずらしてスクロール(ここを消すと※が動く) 114$(function () { 115 var headerHight = $("#menu-wrap").height(); 116 $('a[href^=#]').click(function(){ 117 var href= $(this).attr("href"); 118 var target = $(href == "#" || href == "" ? 'html' : href); 119 var position = target.offset().top-headerHight; 120 $("html, body").animate({scrollTop:position}, 550, "swing"); 121 return false; 122 }); 123}); 124 </script> 125</head> 126 127<body> 128 <div id="menu-wrap"> 129 <a class="menu-trigger"> <span></span> <span></span> <span></span> </a> 130 <nav class="g-nav"> 131 <ul class="list"> 132 <li class="item"><a href="#content_first">コンテンツ1</a></li> 133 <li class="item"><a href="#content_second">コンテンツ2</a></li> 134 <li class="item"><a href="#content_third">コンテンツ3</a></li> 135 <li class="item"><a href="#content_fourth">コンテンツ4</a></li> 136 </ul> 137 </nav> 138 </div> 139 <div id="content_first" class="cont">コンテンツ1 140 </div> 141 <div id="content_second" class="cont">コンテンツ2 142 </div> 143 <div id="content_third" class="cont">コンテンツ3 144 </div> 145 <div id="content_fourth" class="cont">コンテンツ4 146 </div> 147</body> 148</html>
回答1件
あなたの回答
tips
プレビュー