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

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

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

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

796閲覧

複数ページにわたり、drawer-navを開いた時に、背景を固定させたい。

free_teku

総合スコア103

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/12/23 08:45

編集2021/12/25 03:53

前提・実現したいこと

複数ページにわたり、humburgerをクリックし、navを開いた時に、背景を固定させたい。
現状:Topページでは動いていますが他の階層ページ(blog)では、動いていないです。
※blogのindex.htmlも同じCSSにしています。
HTMLのclassに反応がないです!!

$('html').removeclass('scroll-prevent') // 追記 $('html').toggleClass('scroll-prevent') // 追記

を使って、実装しようとしています。

試したこと

下記のサイトを見て行いましたが、できませんでした。
背景を固定

該当のソースコード

1つ目はTopページ↓

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Drawer</title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <div class="wrapper"> <main> <h1>ドロワーメニュー</h1> <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> </main> <div class="hamburger_button" href=""> <span></span> <span></span> <span></span> </div> <nav class="menu-trigger"> <ul> <li>MENU</li> <li>MENU</li> <li>MENU</li> </ul> </nav> <div class="overlay"></div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <script src="./jquery-3.6.0.min.js"></script> <script src="./script.js"></script> </body> </html>

仮のblog site

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <title>Drawer</title> 7 <link rel="stylesheet" type="text/css" href="./../style.css"> 8 9</head> 10 11<body> 12 13<div class="wrapper"> 14 <main> 15 <h1>ドロワーメニュー</h1> 16 <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> 17 </main> 18 <div class="hamburger_button" href=""> 19 <span></span> 20 <span></span> 21 <span></span> 22 </div> 23 <nav class="menu-trigger"> 24 <ul> 25 <li><a href="../humberger-menu.html"></a></li> 26 <li>MENU</li> 27 <li>MENU</li> 28 </ul> 29 </nav> 30 <div class="overlay"></div> 31</div> 32<br> 33<br> 34<br> 35<br> 36<br> 37<br> 38<br> 39<br> 40<br> 41<br> 42<script src="../jquery-3.6.0.min.js"></script> 43<script src="../script.js"></script> 44</body> 45</html>

CSS

1 2 3 @charset 'UTF-8'; 4 5 body { 6 font-family: "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "Meiryo UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; 7 font-size: 16px; 8 line-height: 1.5; 9 margin: 0; 10 } 11.scroll-prevent { 12 /*動き固定*/ 13 position: fixed; 14 /*奥行きを管理*/ 15 z-index: -1; 16 /*下2つで背景を元のサイズのまま表示することができる*/ 17 width: 100%; 18 height: 100%; 19 } 20 * { 21 box-sizing: border-box; 22 } 23 ul { 24 list-style: none; 25 margin: 0; 26 padding: 0; 27 } 28 29 ------------------------------------------------- */ 30 .wrapper { 31 height: 100%; 32 overflow-x: hidden; 33 position: relative; 34 } 35 .overlay { 36 content: ""; 37 display: block; 38 width: 0; 39 height: 0; 40 background-color: rgba(0, 0, 0, 0.5); 41 position: absolute; 42 top: 0; 43 left: 0; 44 z-index: 2; 45 opacity: 0; 46 transition: opacity .5s; 47 } 48 .overlay.open { 49 width: 100%; 50 height: 100%; 51 opacity: 1; 52 } 53 main { 54 height: 100%; 55 min-height: 100vh; 56 padding: 0 50px; 57 background-color: #eee; 58 transition: all .5s; 59 display: flex; 60 flex-direction: column; 61 justify-content: center; 62 } 63 main.open { 64 transform: translateX(-250px); 65 } 66 main h1 { 67 text-align: center; 68 font-weight: 500; 69 } 70 main p { 71 text-align: center; 72 } 73 .hamburger_button { 74 display: inline-block; 75 width: 36px; 76 height: 28px; 77 vertical-align: middle; 78 cursor: pointer; 79 position: fixed; 80 top: 30px; 81 right: 30px; 82 z-index: 100; 83 84 } 85 86.hamburger_button span { 87 display: inline-block; 88 box-sizing: border-box; 89 position: absolute; 90 left: 0; 91 width: 100%; 92 height: 4px; 93 background-color: #000; 94 transition: all .5s; 95 } 96 .hamburger_button.active span { 97 background-color: #fff; 98 } 99 .hamburger_button span:nth-of-type(1) { 100 top: 0; 101 } 102 .hamburger_button.active span:nth-of-type(1) { 103 transform: translateY(12px) rotate(-45deg); 104 } 105 .hamburger_button span:nth-of-type(2) { 106 top: 12px; 107 } 108 .hamburger_button.active span:nth-of-type(2) { 109 opacity: 0; 110 } 111 .hamburger_button span:nth-of-type(3) { 112 bottom: 0; 113 } 114 .hamburger_button.active span:nth-of-type(3) { 115 transform: translateY(-12px) rotate(45deg); 116 } 117 118 .menu-trigger { 119 width: 250px; 120 height: 100%; 121 padding-top: 100px; 122 background-color: rgb(16, 69, 153, 0.8); 123 position: fixed; 124 top: 0; 125 right: 0; 126 z-index: 10; 127 transform: translate(250px); 128 transition: all .5s; 129 } 130 .menu-trigger.open { 131 transform: translateZ(0); 132 } 133 .menu-trigger li { 134 color: #fff; 135 text-align: center; 136 padding: 10px 0; 137 }

js

1$(function(){ 2 $('.hamburger_button').on('click',function(){ 3 $('html').toggleClass('scroll-prevent') 4 if($(this).hasClass('active')){ 5 $(this).removeClass('active'); 6 $('main').removeClass('open'); 7 $('.menu-trigger').removeClass('open'); 8 $('.overlay').removeClass('open'); 9 $('html').removeclass('scroll-prevent') // 追記 10 } else { 11 $(this).addClass('active'); 12 $('main').addClass('open'); 13 $('.menu-trigger').addClass('open'); 14 $('.overlay').addClass('open'); 15 } 16 }); 17 $('.overlay').on('click',function(){ 18 if($(this).hasClass('open')){ 19 $(this).removeClass('open'); 20 $('.menu-trigger').removeClass('active'); 21 $('main').removeClass('open'); 22 $('.menu-trigger').removeClass('open'); 23 } 24 }); 25 26 var menu = $('.menu-trigger'), 27 menuBtn = $('.hamburger_button'), 28 body = $(document.body), 29 menuWidth = menu.outerWidth(); 30 }); 31 32

こちらが本題です<(_ _)>
うまくいかないサイト

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

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

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

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

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

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

KAOsaka

2021/12/24 06:18

質問に不要な部分を省いて、問題の動作が再現する最小限のコードを載せてください。
free_teku

2021/12/24 06:28

修正依頼、ありがとうございます。<(_ _)> 修正いたします。 今から、修正します
free_teku

2021/12/24 06:40

<br>と簡単なtxtを使って、、上下にスライドできるようにしました。 ご教授頂けると幸いです。
guest

回答1

0

ベストアンサー

1段目の関数名が全て小文字になっています。

NG: removeclass
OK: removeClass

$('html').removeclass('scroll-prevent') // 追記 $('html').toggleClass('scroll-prevent') // 追記

追記

以下2つjsFiddleにて動作確認してみましたが、同じように見えます。
free_teku さんの環境では違っていますか?

追記

こちらが本題です<(_ _)>
うまくいかないサイト

JSエラーが発生しているようです。

JSエラー

見た感じ関数が閉じられていないので、確認してみてください。

投稿2021/12/24 09:55

編集2021/12/27 01:43
KAOsaka

総合スコア531

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

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

free_teku

2021/12/24 10:07 編集

ご回答ありがとうございます。 removeClass 修正させていただきましたが、変化ありませんでした。 JSファイルは、下層ページ、Topページ双方とも同じファイルを使っています。 ご教授頂けると幸いです。よろしくお願いいたします。 現状は、Topページで反応しますが、下層ページでは、反応しない現状があります。
KAOsaka

2021/12/24 10:20

追記しました。
free_teku

2021/12/25 03:30

ありがとうございます。結論 こちらに関しては、成功できました。 しかし、私が行いたいサイトではできないです。汗 数時間考えていましたが、やっぱりできないです。もし、可能であれば原因追及サポートしていただきたいです<(_ _)>
KAOsaka

2021/12/27 01:43

追記しました。
free_teku

2021/12/27 09:01

KAosakaさん、ご回答や添削ありがとうございます。 無事解決できました。 初めは、小文字のために動いていなかったようでした。アドバイスありがとうございます!! また、動いたきっかけも別のファイルを設定していたために動いていませんでした。 できる限り、落ち着いてミスをなくせるように今後はコードを書こうと思いました。 この度は、本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問