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

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

ただいまの
回答率

90.75%

  • JavaScript

    15275questions

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

  • jQuery

    6319questions

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

  • HTML5

    3724questions

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

  • CSS3

    1914questions

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

position:fixedにつきまして

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 233

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

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

<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>
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;
}
}
 $('#header').fixedsticky();
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • macaron_xxx

    2018/06/04 16:01 編集

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

    キャンセル

  • hashimoto-japan

    2018/06/04 17:18

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

    キャンセル

  • kszk311

    2018/06/04 23:03

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

    キャンセル

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    15275questions

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

  • jQuery

    6319questions

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

  • HTML5

    3724questions

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

  • CSS3

    1914questions

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