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

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

ただいまの
回答率

87.80%

メニューバーを、スクロール時に最上部に固定したいです。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 217
退会済みユーザー

退会済みユーザー

前提・実現したいこと

html、css、jsは無料のテンプレートを使用しています。

元々はロゴや電話番号とメイン画像の間にある
メニューバーを、スクロール時に最上部に固定したいです。

発生している問題・エラーメッセージ

固定は出来たのですが、スクロール前から最上部にいってしまいます。

エラーメッセージ

該当のソースコード

<!-- ヘッダー -->
<div id="header">
    <div class="inner">

      <h1>ホームページサンプル株式会社のサイトです</h1>

        <!-- ロゴ -->
        <div class="logo">
            <a href="index.html">Company Name<br><span>Your Company Slogan</span></a>
        </div>
        <!-- / ロゴ -->

    <!-- 電話番号+受付時間 -->
        <div class="info">
        <p class="tel">電話: <strong>012-3456-7890</strong></p>
            <p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
    </div>
        <!-- / 電話番号+受付時間 -->



  <!-- トップナビゲーション -->
    <ul id="topnav" class="fixed">
        <li class="active"><a href="index.html">トップページ<br><span>Top</span></a></li>
        <li><a href="subpage.html">ごあいさつ<br><span>Greeting</span></a></li>
        <li><a href="subpage.html">サービス概要<br><span>Service</span></a></li>
        <li><a href="subpage.html">弊社の取り組み<br><span>Approach</span></a></li>
        <li><a href="subpage.html">会社情報<br><span>Company</span></a></li>
        <li><a href="subpage.html">お問い合わせ<br><span>Contact</span></a></li>
    </ul>
    <!-- トップナビゲーション -->

  </div>

</div>
<!-- / ヘッダー -->

<!-- メイン画像 -->
<div id="mainBanner" class="mainImg">
    <div class="inner">
        <img src="images/mainImg.jpg" width="940" height="300" alt="">
    <div class="slogan">
            <h2>自然との調和を目指す企業です</h2>
            <h3>革新的な技術で世の中を動かす企業を目指します。</h3>
        </div>
    </div>
</div>
<!-- / メイン画像 -->
.inner{
margin:0 auto;
width:100%;
}


/*************
/* ヘッダー
*************/
h1{
font-size:12px;
line-height:1.6;
font-weight:normal;
}

#header{
overflow:hidden;
padding:5px 0 0;
}

* html #header{height:1%;}


/*************
/* ロゴ
*************/
#header .logo{
float:left;
padding:20px 0;
}

.logo a{
font-size:20px;
font-weight:bold;
line-height:1;
font-family:"Palatino Linotype", "Book Antiqua", Palatino,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;
}

.logo span{
font-size:12px;
font-weight:normal;
}

.info{
float:right;
padding:20px 0;
}

.tel strong{
font-size:20px;
font-weight:bold;
}

/**************************
/* トップナビゲーション
**************************/
ul#topnav{
clear:both;
overflow:hidden;
margin:0 auto 30px;
background:#df8b04;
}


/*追記*/
.fixed{
  position: fixed;
  top: 0;
  z-index: 10;
  margin-top: 100px;
  padding-top: 100px;
}
.fixed $(function () { 
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) { //100px以上スクロールした固定
      $('#menu').addClass('fixed');
    } else {
      $('#menu').removeClass('fixed');
    }
  });
});

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

初心者でよく分からないのでコードを余分に記載していると思いますが、
見づらかったら申し訳ありません。
教えて頂けますと幸いです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

jsに.fixedを書いているのはあきらかにおかしいです

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/21 11:15

    回答していただきましてありがとうございます!
    本当に初心者でして、どのようにかいたら良いか
    教えて頂けますと幸いです(><)

    キャンセル

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

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

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