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

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

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

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

Q&A

解決済

1回答

2315閲覧

スクリプトが競合しているとこを教えてください

KEJ

総合スコア14

JavaScript

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

0グッド

0クリップ

投稿2017/12/20 08:26

編集2017/12/20 16:52

スクロールのスクリプトを入れるとハンバーガーメニューが効かなくなってしましました。
何かが競合しているのでしょうか?
解決策をご教授お願いいたします。

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>

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2017/12/20 16:23

一部分だけを抜き取ったところで、不具合を再現できなければ、回答できません。
KEJ

2017/12/20 16:38

すみません。書き直しましたので何卒お願いいたします。
退会済みユーザー

退会済みユーザー

2017/12/20 16:43

エラーの再現手順と、何を期待して何ができないのかを記述してください。
KEJ

2017/12/20 16:48

度々すみません。本来ハンバーガーメニューからリンクにページ内移動するとメニューが閉じる様になっています。しかしヘッダーの高さ分だけずらしてスクロールするスクリプトを入れるとメニューが閉じなくなってしまします。ヘッダーの高さ分だけずらしてスクロールするスクリプトを外さずにメニューも閉じる様にしたいです。宜しくお願いいたします。
guest

回答1

0

ベストアンサー

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 $(function(){ 114 var headerHight = $("#menu-wrap").height(); 115 $('a[href^=#]').on('click', function(){ 116 var href= $(this).attr("href"); 117 var target = $(href == "#" || href == "" ? 'html' : href); 118 var position = target.offset().top-headerHight; 119 $("html, body").animate({scrollTop:position}, 550, "swing"); 120 }); 121 }); 122 </script> 123</head> 124 125<body> 126 <div id="menu-wrap"> 127 <a class="menu-trigger"> <span></span> <span></span> <span></span> </a> 128 <nav class="g-nav"> 129 <ul class="list"> 130 <li class="item"><a href="#content_first">コンテンツ1</a></li> 131 <li class="item"><a href="#content_second">コンテンツ2</a></li> 132 <li class="item"><a href="#content_third">コンテンツ3</a></li> 133 <li class="item"><a href="#content_fourth">コンテンツ4</a></li> 134 </ul> 135 </nav> 136 </div> 137 <div id="content_first" class="cont">コンテンツ1 138 </div> 139 <div id="content_second" class="cont">コンテンツ2 140 </div> 141 <div id="content_third" class="cont">コンテンツ3 142 </div> 143 <div id="content_fourth" class="cont">コンテンツ4 144 </div> 145</body> 146</html>

こう?
( return false;で他のイベント拒否してる気がする)

投稿2017/12/22 06:15

rururu3

総合スコア5545

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

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

KEJ

2017/12/22 07:23

できました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問