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

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

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

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

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

525閲覧

position:fixedにつきまして

hashimoto-japan

総合スコア8

CSS3

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

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/06/04 04:04

お世話になってます。
この度「fixedsticky」というjqueryを用いてスクロールをしたときもヘッダーがついてくるよう固定しています。
■分からないこと
・スマホ時、トグルボタンを押してメニューを開いたらposition:fixedが取れてしまい、ついてこなくなる
・トグルボタンを押さなかったらヘッダーはついてきます。
・トグルボタンを押したら.site-headerが.site-header--openという名前に変わるようにしています。
・スクロールしたときもヘッダーはついてくるようにしたいです。

下記がhtmlとcssです。
どうぞよろしくお願いします。

HTML

1<header id="header" class="site-header fixedsticky"><div class="site-header__inner"> 2 <div id="site-header--sp" class="site-header--sp"> 3 <div class="site-header-scroll"> 4 <nav id="gnav" class="gnav"> 5 <ul class="gnav__list"> 6 <li class="gnav__item"><a href="/#about" class="gnav__link">Select Webクラウドについて</a></li> 7 <li class="gnav__item"><a href="/#service" class="gnav__link">サービス</a></li> 8 <li class="gnav__item"><a href="/works/case/" class="gnav__link">制作事例</a></li> 9 <li class="gnav__item"><a href="/blog/" class="gnav__link">ブログ</a></li> 10 <li class="gnav__item"><a href="/contact/" class="gnav__link">お問い合わせ</a></li> 11 <li class="gnav__item-sp"><a href="tel:0120925549/" class="gnav__link-tel"><i class="fa fa-phone fa-fw" aria-hidden="true"></i>0120-925-549</a></li> 12 <li class="gnav__item-sp"><a href="/check/" class="gnav__link-check">WEB診断を希望する</a></li> 13 </ul> 14 </nav> 15 </div> 16 </div> 17 <div id="site-header__nav-toggle" class="site-header__nav-toggle"> 18 <div class="site-header__nav-icon"><span class="site-header__nav-bar"></span><span class="site-header__nav-bar"></span><span class="site-header__nav-bar"></span></div> 19 </div> 20 </div> 21</div> 22</header>

CSS

1header { 2 -webkit-transition: all 0.3s; 3 transition: all 0.3s; 4} 5.site-header { 6 top: 0; 7 left: 0; 8 z-index: 2; 9 width: 100%; 10 -webkit-transition: all 0.3s; 11 transition: all 0.3s; 12 background-color: rgba(255,255,255,0.9); 13} 14.fixedsticky { 15 top: 0px; 16} 17.site-header--open { 18 background-color: rgba(255,255,255,0.9); 19} 20@media screen and (min-width: 768px) { 21.site-header__logo-scroll { 22 display: none; 23} 24} 25@media screen and (min-width: 768px) { 26.is-animation .site-header__logo-scroll { 27 display: block; 28 -webkit-animation: show .5s linear 0s; 29 animation: show .5s linear 0s; 30} 31} 32@media screen and (min-width: 768px) and (max-width:1024px) { 33.is-animation .site-header__logo-scroll { 34 padding-left: 15px; 35} 36} 37@media screen and (max-width: 767px) { 38.site-header__logo-scroll { 39 display: none; 40} 41} 42.site-header__inner { 43 max-width: 1310px; 44 margin-left: auto; 45 margin-right: auto; 46 position: relative; 47} 48@media screen and (min-width: 768px) { 49.is-animation .site-header__inner { 50 padding: 15px 0; 51} 52} 53@media screen and (min-width: 768px) and (max-width:1024px) { 54.site-header__inner { 55 padding-left: 15px; 56 padding-right: 15px; 57} 58} 59.site-header--sp { 60 width: 100%; 61 position: relative; 62 display: -webkit-box; 63 display: -ms-flexbox; 64 display: flex; 65 -webkit-box-pack: justify; 66 -ms-flex-pack: justify; 67 justify-content: space-between; 68 -webkit-box-align: center; 69 -ms-flex-align: center; 70 align-items: center; 71 -ms-flex-wrap: wrap; 72 flex-wrap: wrap; 73} 74@media screen and (min-width: 768px) { 75.site-header--sp { 76 height: auto; 77 padding: 0; 78} 79} 80.site-header__tel-toggle { 81 cursor: pointer; 82 z-index: 101; 83 background-color: #999; 84 border-radius: 4px; 85 color: #fff; 86 width: 40px; 87 height: 40px; 88 font-size: 1.8rem; 89 text-align: center; 90 line-height: 40px; 91 position: absolute; 92 right: 15%; 93 top: 20%; 94 margin-right: 0.5rem; 95} 96.site-header__tel-toggle:hover { 97 color: #fff; 98} 99@media screen and (min-width: 768px) { 100.site-header__tel-toggle { 101 display: none; 102} 103} 104.site-header__logo-sp { 105 max-width: 200px; 106} 107@media screen and (min-width: 768px) { 108.site-header__logo-sp { 109 display: none; 110} 111} 112.site-header__nav-toggle { 113 cursor: pointer; 114 z-index: 101; 115 width: 40px; 116 height: 40px; 117 text-align: center; 118 line-height: 1.3; 119} 120@media screen and (min-width: 768px) { 121.site-header__nav-toggle { 122 display: none; 123} 124} 125.site-header__nav-icon { 126 position: relative; 127 width: 24px; 128 height: 20px; 129 text-align: center; 130 margin: 0 auto; 131 top: 10px; 132 right: 10px; 133} 134.site-header__nav-bar { 135 display: block; 136 position: absolute; 137 height: 2px; 138 width: 100%; 139 background: -webkit-linear-gradient(top, #9c0094 10%, #6c00ff 90%); /* Chrome10-25,Safari5.1-6 */ 140 background: linear-gradient(to bottom, #9c0094 10%, #6c00ff 90%); 141 left: 0; 142 -webkit-transition: .35s ease-in-out; 143 transition: .35s ease-in-out; 144} 145.site-header__nav-bar:nth-child(1) { 146 top: 0; 147} 148.site-header__nav-bar:nth-child(2) { 149 top: 8px; 150} 151.site-header__nav-bar:nth-child(3) { 152 top: 16px; 153} 154.site-header--open .site-header__nav-bar:nth-child(1) { 155 top: 8px; 156 -webkit-transform: rotate(45deg); 157 transform: rotate(45deg); 158} 159.site-header--open .site-header__nav-bar:nth-child(2) { 160 width: 0; 161 left: 50%; 162} 163.site-header--open .site-header__nav-bar:nth-child(3) { 164 top: 8px; 165 -webkit-transform: rotate(-45deg); 166 transform: rotate(-45deg); 167} 168.site-header--open .gnav { 169 /* .gnav top + .site-header--sp height */ 170 background-color: #f5f5fa; 171 display: block; 172 -webkit-animation: show .3s ease 0s; 173 animation: show .3s ease 0s; 174} 175.gnav { 176 display:none; 177 width: 100%; 178 -webkit-transition: .5s ease-in-out; 179 transition: .5s ease-in-out; 180 z-index: 999; 181 position: fixed; 182 left: 0; 183 height: 100%; 184} 185@media screen and (min-width: 768px) { 186.gnav { 187 display:block; 188 position: static; 189} 190} 191@media screen and (min-width: 768px) and (max-width:1024px) { 192.gnav { 193 font-size: 13px; 194} 195} 196.gnav__list { 197 width: 100%; 198 top: 20%; 199 position:absolute; 200} 201@media screen and (min-width: 768px) { 202.gnav__list { 203 position:static; 204 display: -webkit-box; 205 display: -ms-flexbox; 206 display: flex; 207 -webkit-box-align: center; 208 -ms-flex-align: center; 209 align-items: center; 210 margin: 0 auto; 211 -webkit-box-pack: end; 212 -ms-flex-pack: end; 213 justify-content: flex-end; 214} 215} 216.gnav__item { 217 position: relative; 218} 219@media screen and (min-width: 768px) { 220.gnav__item:not(:nth-child(5))::after { 221 content: ''; 222 height: 1.125rem; 223 border-right: 1px solid #524640; 224 position: absolute; 225 right: 0; 226 top: -5px; 227 bottom: 0; 228 margin: auto; 229 display: block; 230} 231} 232.gnav__item:not(:first-child) .owl-in_page_tree { 233 border-bottom: 2px solid #999; 234} 235@media screen and (min-width: 768px) { 236.gnav__item-sp { 237 display: none; 238} 239} 240.gnav__item-sp-check{ 241 position:relative; 242} 243.gnav__item-sp-check::after{ 244 content: url("/images/arrow.png"); 245 position: absolute; 246 right:15px; 247} 248@media screen and (min-width: 768px) { 249.gnav__item-sp-check { 250 display: none; 251} 252} 253.gnav__link { 254 padding-top: 1rem; 255 padding-left: 1rem; 256 padding-bottom: 1rem; 257 width: 100%; 258 display: block; 259 text-align: center; 260} 261@media screen and (min-width: 768px) { 262.gnav__link { 263 border-bottom: none; 264 padding: 0.5rem 0rem 1rem; 265 position: relative; 266 -webkit-transition: .3s; 267 transition: .3s; 268} 269}

javascript

1 $('#header').fixedsticky();

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

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

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

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

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

macaron_xxx

2018/06/04 07:01 編集

HTMLのdivタグのエンドタグが一つ多いですね。トグルの動きを実行しているJavaScriptも記載してください。また、HTML、CSSのインデントも見直してくださいね。
hashimoto-japan

2018/06/04 08:18

すみません、自己解決しました!
kszk311

2018/06/04 14:03

解決したのなら、解決した方法を記載のうえ、解決済としておいてもらえますか。
guest

回答1

0

自己解決

すみません、他の方法で対応することになりました><

投稿2018/06/05 00:04

hashimoto-japan

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問