質問編集履歴

2 headerのtextーprimary を’text-info’に変更しました。

babi-0105

babi-0105 score 5

2019/12/03 17:58  投稿

jQuely:ハンバーガーメニューのスクロールイベントが動かない
### 前提・実現したいこと
jQuely:ハンバーガーメニューのスクロールイベントを行いたいのですが、動いてくれません。
(実現したい事)
・メニューアイコン の中の’about'(後ほどコードにて紹介)などをクリックした際に、指定した場所まで自動スクロールで移動させたい
### 発生している問題・エラーメッセージ
以前、同じようにスクロールイベントを行った際は動いたのですが、、
その時と同様のコードを使っているのですが、今回は動きません。
### 該当のソースコード
```HTML
<head>
    <meta charset="utf-8">
    <title>Shoya Baba.PortFolio</title>
    <link rel="stylesheet" href="portfolio.css">
    <link rel="stylesheet" href="portfolio.media.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
   <header class="header position-fixed w-100 border-bottom border-secondary text-light">
   <header class="header position-fixed w-100 border-bottom border-secondary text-info">
       <div class="container-fuild text-light">
           <nav class="navbar navbar-expand-md navbar-light sticky-top">
               <div class="navbar-brand header-logo">Portfolio</div>
               <button class="navbar-toggler" data-toggle="collapse" data-target="#menu" type="button">
                   <span class="navbar-toggler-icon"></span>
               </button>
               <div id="menu" class="collapse navbar-collapse text-center">
                   <ul class="navbar-nav">
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink1">About</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink2">Skills</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink3">Production</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink4">Can do.</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink5">Contact</a></li>
                   </ul>
               </div>   
           </nav>
       </div>
   </header>
   <div class="about container my-5">
           <h2 class="text-center border-bottom border-info page-header mb-5 display-4 family pb-3">About</h2>   
       <div class="row">
           <div class="col-md-4 col-lg-5 text-center">
               <img src="IMG_2785.jpeg" class="rounded-circle border border-success mb-5 my-md-5">
           </div>
           <div class="col-md-8 col-lg-7 px-5 mt-lg-5">
               <h2 class="text-center mb-4">ああああああああああああ</h2>
               <p class="about-text text-size">良い良い良い良いいいいいい(2019/3)っっっっっっっっっっっっっs<br>
               っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっx
           </div>
       </div>
   </div>
    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src='portfolio.js'></script>
</body>
```
```CSS  
header{  
   z-index:10;  
   background-color: rgba(0,0,0,0.8);  
   font-family: 'Homemade Apple', cursive;  
}  
```  
 
```Javascript
$(function(){
   var headerHight = 56;
   //①ページ内スクロール
       $(".navlink1").click(function () {
       var i = $(".navlink1").index(this)
       var p = $(".about").eq(i).offset().top-headerHight;
       $('html,body').animate({ scrollTop: p }, 'fast');
       return false;
   });
});
```
### 試した事
①alert('OK');
→アラート命令より前のスクリプトにミスはない事の確認
②jQuely読み込みの、scriptタグを<head>タグの中へ
③<a>ではなく以前の、<li>タグのクラスを’navlink1’に。
### 補足情報(FW/ツールのバージョンなど)
・今回初めて、bootstrapを使用しました。
→✅bootstrapが何か関係しているのではないかと考えています。
jQuelyの使用に何か影響を与えてしまうのでしょうか?
・navタグのtextの色の変更も行う事ができません。
✅これも何か関係あるのでしょうか?
お忙しいとは思いますが、回答お待ちしております。
  • JavaScript

    25037 questions

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

  • jQuery

    9778 questions

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

  • スクロール

    76 questions

    スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

  • Bootstrap

    1661 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

1 文字の間違いを修正

babi-0105

babi-0105 score 5

2019/12/03 16:36  投稿

jQuely:ハンバーガーメニューのスクロールイベントが動かない
### 前提・実現したいこと
jQuely:ハンバーガーメニューのスクロールイベントを行いたいのですが、動いてくれません。
(実現したい事)
### 発生している問題・エラーメッセージ
以前、同じようにスクロールイベントを行った際は動いたのですが、、
その時と同様のコードを使っているのですが、今回は動きません。
### 該当のソースコード
```HTML
<head>
    <meta charset="utf-8">
    <title>Shoya Baba.PortFolio</title>
    <link rel="stylesheet" href="portfolio.css">
    <link rel="stylesheet" href="portfolio.media.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
   <header class="header position-fixed w-100 border-bottom border-secondary text-light">
       <div class="container-fuild text-light">
           <nav class="navbar navbar-expand-md navbar-light sticky-top">
               <div class="navbar-brand header-logo">Portfolio</div>
               <button class="navbar-toggler" data-toggle="collapse" data-target="#menu" type="button">
                   <span class="navbar-toggler-icon"></span>
               </button>
               <div id="menu" class="collapse navbar-collapse text-center">
                   <ul class="navbar-nav">
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink1">About</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink2">Skills</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink3">Production</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink4">Can do.</a></li>
                       <li class="nav-item border-bottom border-success"><a href="" class="nav-link navlink5">Contact</a></li>
                   </ul>
               </div>   
           </nav>
       </div>
   </header>
   <div class="about container my-5">
           <h2 class="text-center border-bottom border-info page-header mb-5 display-4 family pb-3">About</h2>   
       <div class="row">
           <div class="col-md-4 col-lg-5 text-center">
               <img src="IMG_2785.jpeg" class="rounded-circle border border-success mb-5 my-md-5">
           </div>
           <div class="col-md-8 col-lg-7 px-5 mt-lg-5">
               <h2 class="text-center mb-4">ああああああああああああ</h2>
               <p class="about-text text-size">良い良い良い良いいいいいい(2019/3)っっっっっっっっっっっっっs<br>
               っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっx
           </div>
       </div>
   </div>
    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src='portfolio.js'></script>
</body>
```
```Javascript
$(function(){
   var headerHight = 56;
   //①ページ内スクロール
       $(".navlink1").click(function () {
       var i = $(".navlink1").index(this)
       var p = $(".about").eq(i).offset().top-headerHight;
       $('html,body').animate({ scrollTop: p }, 'fast');
       return false;
   });
});
```
### 試した事
①alert('OK');
→アラート命令より前のスクリプトにミスはない事の確認
②jQuely読み込みの、scriptタグを<head>タグの中へ
③<a>ではなく以前の、<li>タグのクラスを’navlink1’に。
### 補足情報(FW/ツールのバージョンなど)
・今回初めて、bootstrapを使用しました。
→✅bootstrapが何か関係しているのではないかと考えています。
jQuelyの使用に何か影響を与えてしまうのでしょうか?
・navタグのtextの色の変更も行う事ができません。
✅これも何か関係あるのでしょうか?
お忙しいとは思いますが、回答お待ちしております。
  • JavaScript

    25037 questions

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

  • jQuery

    9778 questions

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

  • スクロール

    76 questions

    スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

  • Bootstrap

    1661 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る