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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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オブジェクト」のメソッドとして定義されています。

解決済

position:fixedにつきまして

hashimoto-japan
hashimoto-japan

総合スコア0

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オブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

23閲覧

投稿2018/06/04 04:04

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

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

HTML

<header id="header" class="site-header fixedsticky"><div class="site-header__inner"> <div id="site-header--sp" class="site-header--sp"> <div class="site-header-scroll"> <nav id="gnav" class="gnav"> <ul class="gnav__list"> <li class="gnav__item"><a href="/#about" class="gnav__link">Select Webクラウドについて</a></li> <li class="gnav__item"><a href="/#service" class="gnav__link">サービス</a></li> <li class="gnav__item"><a href="/works/case/" class="gnav__link">制作事例</a></li> <li class="gnav__item"><a href="/blog/" class="gnav__link">ブログ</a></li> <li class="gnav__item"><a href="/contact/" class="gnav__link">お問い合わせ</a></li> <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> <li class="gnav__item-sp"><a href="/check/" class="gnav__link-check">WEB診断を希望する</a></li> </ul> </nav> </div> </div> <div id="site-header__nav-toggle" class="site-header__nav-toggle"> <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> </div> </div> </div> </header>

CSS

header { -webkit-transition: all 0.3s; transition: all 0.3s; } .site-header { top: 0; left: 0; z-index: 2; width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; background-color: rgba(255,255,255,0.9); } .fixedsticky { top: 0px; } .site-header--open { background-color: rgba(255,255,255,0.9); } @media screen and (min-width: 768px) { .site-header__logo-scroll { display: none; } } @media screen and (min-width: 768px) { .is-animation .site-header__logo-scroll { display: block; -webkit-animation: show .5s linear 0s; animation: show .5s linear 0s; } } @media screen and (min-width: 768px) and (max-width:1024px) { .is-animation .site-header__logo-scroll { padding-left: 15px; } } @media screen and (max-width: 767px) { .site-header__logo-scroll { display: none; } } .site-header__inner { max-width: 1310px; margin-left: auto; margin-right: auto; position: relative; } @media screen and (min-width: 768px) { .is-animation .site-header__inner { padding: 15px 0; } } @media screen and (min-width: 768px) and (max-width:1024px) { .site-header__inner { padding-left: 15px; padding-right: 15px; } } .site-header--sp { width: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .site-header--sp { height: auto; padding: 0; } } .site-header__tel-toggle { cursor: pointer; z-index: 101; background-color: #999; border-radius: 4px; color: #fff; width: 40px; height: 40px; font-size: 1.8rem; text-align: center; line-height: 40px; position: absolute; right: 15%; top: 20%; margin-right: 0.5rem; } .site-header__tel-toggle:hover { color: #fff; } @media screen and (min-width: 768px) { .site-header__tel-toggle { display: none; } } .site-header__logo-sp { max-width: 200px; } @media screen and (min-width: 768px) { .site-header__logo-sp { display: none; } } .site-header__nav-toggle { cursor: pointer; z-index: 101; width: 40px; height: 40px; text-align: center; line-height: 1.3; } @media screen and (min-width: 768px) { .site-header__nav-toggle { display: none; } } .site-header__nav-icon { position: relative; width: 24px; height: 20px; text-align: center; margin: 0 auto; top: 10px; right: 10px; } .site-header__nav-bar { display: block; position: absolute; height: 2px; width: 100%; background: -webkit-linear-gradient(top, #9c0094 10%, #6c00ff 90%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #9c0094 10%, #6c00ff 90%); left: 0; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; } .site-header__nav-bar:nth-child(1) { top: 0; } .site-header__nav-bar:nth-child(2) { top: 8px; } .site-header__nav-bar:nth-child(3) { top: 16px; } .site-header--open .site-header__nav-bar:nth-child(1) { top: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .site-header--open .site-header__nav-bar:nth-child(2) { width: 0; left: 50%; } .site-header--open .site-header__nav-bar:nth-child(3) { top: 8px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .site-header--open .gnav { /* .gnav top + .site-header--sp height */ background-color: #f5f5fa; display: block; -webkit-animation: show .3s ease 0s; animation: show .3s ease 0s; } .gnav { display:none; width: 100%; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; z-index: 999; position: fixed; left: 0; height: 100%; } @media screen and (min-width: 768px) { .gnav { display:block; position: static; } } @media screen and (min-width: 768px) and (max-width:1024px) { .gnav { font-size: 13px; } } .gnav__list { width: 100%; top: 20%; position:absolute; } @media screen and (min-width: 768px) { .gnav__list { position:static; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .gnav__item { position: relative; } @media screen and (min-width: 768px) { .gnav__item:not(:nth-child(5))::after { content: ''; height: 1.125rem; border-right: 1px solid #524640; position: absolute; right: 0; top: -5px; bottom: 0; margin: auto; display: block; } } .gnav__item:not(:first-child) .owl-in_page_tree { border-bottom: 2px solid #999; } @media screen and (min-width: 768px) { .gnav__item-sp { display: none; } } .gnav__item-sp-check{ position:relative; } .gnav__item-sp-check::after{ content: url("/images/arrow.png"); position: absolute; right:15px; } @media screen and (min-width: 768px) { .gnav__item-sp-check { display: none; } } .gnav__link { padding-top: 1rem; padding-left: 1rem; padding-bottom: 1rem; width: 100%; display: block; text-align: center; } @media screen and (min-width: 768px) { .gnav__link { border-bottom: none; padding: 0.5rem 0rem 1rem; position: relative; -webkit-transition: .3s; transition: .3s; } }

javascript

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

macaron_xxx
macaron_xxx

2018/06/04 07:01 編集

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

2018/06/04 08:18

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

2018/06/04 14:03

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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オブジェクト」のメソッドとして定義されています。