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

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

質問する

ただいまの
回答率

88.23%

javascript classがうまく付与されない

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 2,198
naza-reth

naza-reth

score 11

javascript初心者なためどうしても解決できず質問しました。
パララックス サイトを構築しておりました。
参考url
http://histerian.net/pallax/
メニューを押してスクロール移動すると、上部のmenuがアクティブ状態になります。
しかし、下にスクロールしてからメニューを押して、上に移動すると、menuが2つ、アクティブ状態になってしまいます。
ただ、1px上にずらすだけで低いコンテンツのメニューのアクティブが消え、本来のコンテンツのmenuがアクティブになります。

下へスクロールしてから、メニューを押して上に戻ったときに、該当のmenuのみ、アクティブ状態になるようにしたいです。

どなたかご教示お願いできないでしょうか
よろしくお願い申し上げます。

また解決を急いでいたために下記の質問サイトにも投稿してしまいました。

yahoo知恵袋
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11182056231

okwave
https://okwave.jp/qa/q9397367.html

動作を制御しているjavascriptファイル以下のファイルだと思います。
scripts.js 

jQuery(document).ready(function ($) {


    $(window).stellar();

    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');


    slide.waypoint(function (event, direction) {

        dataslide = $(this).attr('data-slide');

        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }

    });

    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }



    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);

    });


});

javascriptがまったくわからないので手が打てない状態です。

使用している元は
cool-kitten
というサンプルです。
url
https://www.jqueryscript.net/demo/jQuery-Responsive-Parallax-Scroll...

使用しているjQueryは以下になります。
jquery.easing.1.3.js
jquery.stellar.min.js
waypoints.min.js

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

more_vert4 件の質問への追記・修正依頼

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

  • kei344

    kei344

    2017/11/14 19:43

    質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、提示されているURLが不完全です。URLは到達可能なものをリンクつき（マークダウンでリンクに出来ます）で提示してください。

    キャンセル

  • naza-reth

    naza-reth

    2017/11/14 20:02

    ご指摘、ありがとうございます。書き方をよくわかっていませんでした。

    キャンセル

  • think49

    think49

    2017/11/14 20:18

    https://okwave.jp/qa/q9397367.html https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11182056231 マルチポストする場合はヘルプの通り、「質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。」 https://teratail.com/help#posted-otherservice

    キャンセル

  • naza-reth

    naza-reth

    2017/11/14 20:31

    はじめての投稿でよくわからず、ご迷惑おかけいたしました。

    キャンセル

回答 1 件

link

checkベストアンサー

+1

先日回答したメニューバーで現在のページをハイライトさせたいに近いかもしれません

 改良版

スクロール時のアニメーションがほしいとのことなので、一部改良版を上げておきます
（スクロールがみやすくなるよう背景色をつけてあります） 

<html>
<head>
<style>
#menu-wrap {
  position: fixed;
}
#menu{
text-align: left;
  display: flex;
margin: 0px;
  padding-left: 20px;
}
#menu li {
  display:inline;
}
#menu li:last-child a{
  border-right:1px solid #000000;
}
#menu a:hover{
  background-Color:yellow;
}
#menu a{
  width: 80px;
  border:1px solid #000000;
  border-right:0px;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
  text-decoration:none;
}
.contents {
  height: 500px;
}
.active {
  background-color: red;
}
#content_first,#content_third,#content_etc{background-Color:aqua;}
#content_second,#content_fourth{background-Color:lime;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
  var list=[];
  ['#content_first',
   '#content_second',
   '#content_third',
   '#content_fourth',
   '#content_etc'
   ].map(function(x){
     list.push({
       "min": $(x).offset().top,
       "max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()),
       "id": x,
     })});
  var pre_pos = 0;
  $(function() {
    $('#menu a[href="' + location.hash + '"]').addClass('active');
    $('#menu a').on('click', function() {
      $('#menu a').removeClass('active');
      $(this).addClass('active');
      $('html,body').animate({scrollTop:$($(this).attr("href")).offset().top }, 500, 'swing');
    });
  });

  $(document).on('scroll', function() {
    var this_pos = $(window).scrollTop();
    var pre_id = get_id(pre_pos);
    var this_id = get_id(this_pos);
    if (pre_id !== this_id) {
      if(this_id!==null){
        location.hash=this_id.substr(1,this_id.length);
        $(window).scrollTop(this_pos);
      }else{
        location.hash="";
      };
      $('#menu a').removeClass("active");
      $('[href="' + this_id + '"]').addClass("active");
    }
    pre_pos = this_pos;
  });
  function get_id(pos) {
    var arr = list.filter(function(x) {
      return x.min <= pos && x.max >= pos;
    });
    if (typeof arr[0] == "undefined") return null;
    return arr[0].id;
  }
});
</script>
</head>
<body>
<nav id="menu-wrap">
  <ul id="menu">
    <li><a href="#content_first">Contents1</a></li>
    <li><a href="#content_second">Contents2</a></li>
    <li><a href="#content_third">Contents3</a></li>
    <li><a href="#content_fourth">Contents4</a></li>
    <li><a href="#content_etc">Contents5</a></li>
  </ul>
</nav>
<div class="contents" id="content_first">1</div>
<div class="contents" id="content_second">2</div>
<div class="contents" id="content_third">3</div>
<div class="contents" id="content_fourth">4</div>
<div class="contents" id="content_etc">5</div>
</body>
</html>

 クリックしたところを必ずアクティブにする

<html>
<head>
<style>
#menu-wrap {
  position: fixed;
}
#menu{
text-align: left;
  display: flex;
margin: 0px;
  padding-left: 20px;
}
#menu li {
  display:inline;
}
#menu li:last-child a{
  border-right:1px solid #000000;
}
#menu a:hover{
  background-Color:yellow;
}
#menu a{
  width: 80px;
  border:1px solid #000000;
  border-right:0px;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
  text-decoration:none;
}
.contents {
  height: 500px;
}
.active {
  background-color: red;
}
#content_first,#content_third,#content_etc{background-Color:aqua;}
#content_second,#content_fourth{background-Color:lime;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
  var list=[];
  ['#content_first',
   '#content_second',
   '#content_third',
   '#content_fourth',
   '#content_etc'
   ].map(function(x){
     list.push({
       "min": $(x).offset().top,
       "max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()),
       "id": x,
     })});
  var pre_pos = 0;
  $(function() {
    $('#menu a[href="' + location.hash + '"]').addClass('active');
    $('#menu a').on('click', function(e) {
      e.preventDefault();
      var me=$(this);
      $.when($('html,body').animate({scrollTop:$($(this).attr("href")).offset().top }, 500, 'swing')).done(function(){
        $('#menu a').removeClass('active');
        me.addClass('active');
        location.href=me.attr('href');
      });
    });
  });

  $(document).on('scroll', function() {
    var this_pos = $(window).scrollTop();
    var pre_id = get_id(pre_pos);
    var this_id = get_id(this_pos);
    if (pre_id !== this_id) {
      if(this_id!==null){
        location.hash=this_id.substr(1,this_id.length);
        $(window).scrollTop(this_pos);
      }else{
        location.hash="";
      };
      $('#menu a').removeClass("active");
      $('[href="' + this_id + '"]').addClass("active");
    }
    pre_pos = this_pos;
  });
  function get_id(pos) {
    var arr = list.filter(function(x) {
      return x.min <= pos && x.max >= pos;
    });
    if (typeof arr[0] == "undefined") return null;
    return arr[0].id;
  }
});
</script>
</head>
<body>
<nav id="menu-wrap">
  <ul id="menu">
    <li><a href="#content_first">Contents1</a></li>
    <li><a href="#content_second">Contents2</a></li>
    <li><a href="#content_third">Contents3</a></li>
    <li><a href="#content_fourth">Contents4</a></li>
    <li><a href="#content_etc">Contents5</a></li>
  </ul>
</nav>
<div class="contents" id="content_first">1</div>
<div class="contents" id="content_second">2</div>
<div class="contents" id="content_third">3</div>
<div class="contents" id="content_fourth">4</div>
<div class="contents" id="content_etc">5</div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/15 13:00

    また作っていただいてしまいまして、ありがとうございます。
    「クリックしたところを必ずアクティブにする」を試させていただきました。問題なく動いております。
    作っていただいたものを参考に、いろいろ勉強していきたいと思います。
    稚拙な質問につぎつぎと答えていただき感謝致します。
    ありがとうございました。

    キャンセル

  • 2017/11/15 13:10

    しつこくて申し訳ありませんが
    「クリックしたところを必ずアクティブにする」は仕様としては間違っています
    つまり、「ページのTOP位置にあるものをアクティブにする」という原則が無視されています
    具体的にはcontents5がアクティブになっている状態でマウススクロールでページを遡っていっても
    contents4はアクティブにならず、content_thirdに入った瞬間contents3にアクティブが移ります
    見る人が見ると気持ち悪いと感じると思います。

    あくまでも「間違っているのはわかっているけど、例外的にあえてこうしたい」という状態だと
    十分理解した上で運用しないと予期せぬトラブルのもとになる可能性がありますのでご注意下さい

    キャンセル

  • 2017/11/15 14:01

    ご指摘ありがとうございます。
    仕様と違う、間違っている。という点を重要視する。ということは今後、仕事をする上でも大切になってくると思います。
    ご教示感謝致します。

    キャンセル

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

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