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

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

ただいまの
回答率

90.49%

  • JavaScript

    16461questions

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

  • jQuery

    6720questions

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

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

解決済

回答 1

投稿 編集

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

naza-reth

score 3

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/11/14 19:43

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

    キャンセル

  • naza-reth

    2017/11/14 20:02

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

    キャンセル

  • 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

    2017/11/14 20:31

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

    キャンセル

回答 1

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/14 21:03

    ご回答ありがとうございます。質問の記事を読ませていただきました。
    調整版というコードをコピーして試して見たところ、この動きで良いと思います。
    このコードですと、スクロール時の動きにアニメーションが、ありませんがscripts.jsの内容にうまく組み込めばスクロールのアニメーションもつけることができるのでしょうか?

    キャンセル

  • 2017/11/14 22:05

    早速のご回答ありがとうございます。
    改良版を作っていただきありがとうございます。改良版そのものはうまく動いでいおりますが、自分のHTMLですと、スクロールのアニメーションがありません。自分のHTMLには</body>の前にドロワーメニュー用のスクリプトを記述していますが、それが原因でしょうか?スクリプトは以下のようになります。
    <script>
    $(function() {
    $('.navigation li').on('click', function(){
    if (window.innerWidth <= 768) {
    $('#dwr_open').click();
    }
    });
    });
    </script>
    このスクリプトはドロワーメニューのメニューをクリックすると、ドロワーメニューが閉じるように設定しました。ネットで探して、このサイト用に少し変えたものです。
    改良版を作っていただき恐縮ですが、わかりますでしょうか?

    キャンセル

  • 2017/11/14 22:09

    度々すいません。上記のスクリプトをコメントアウトしてみましたが、スクロールアニメーションはなされませんでした。

    キャンセル

  • 2017/11/14 22:17

    > ドロワーメニューのメニューをクリックすると、ドロワーメニューが閉じる

    の仕様がいまいちわからないのでなんとも言えません。
    開発環境でみてエラーがでていないか確認しながら調整してみてください

    キャンセル

  • 2017/11/14 22:21

    度々すいません。いま試したところスクロールアニメーションは動いてくれました。これからサーバーにアップして試してみます。

    キャンセル

  • 2017/11/14 22:52

    本当にありがとうございました。良い質問の仕方ではなかったと思いますが、どうすることもできなかったので本当に助かりました。
    ありがとうございました。

    キャンセル

  • 2017/11/15 10:37

    yambejpさん
    昨日はいろいろありがとうございました。今日、また問題がおきてしまい失礼ながら質問致します。
    ブラウザの高さによって、いちばん下のメニューがアクティブになりませんでした。
    改良版のcontent5にあたる部分です。
    PCでブラウザをフル表示にするとなぜかいちばん下のメニューがアクティブになりませんでした。
    恐縮ながらご教示お願いできますでしょうか
    よろしくお願い申し上げます。

    キャンセル

  • 2017/11/15 10:52 編集

    ああ、それはそういう仕様につくってあるからですね
    例でいうとcontent_etcのdivの高さが、ブラウザの高さ以下であれば
    content_etcの先頭位置はブラウザのtopまできません
    (content_fourthがアクティブな状況)

    とくにスクロールをかけている関係で、content_third→content_fourthに
    敷居をこえる時点でメニューContents4にアクティブが移ってしまうわけです
    (スクロール中メニューのアクティブが順次移動しているのが目視できますよね)

    以上の仕様をふまえ
    ・スクロール終了後にContent5をクリックすればハッシュがcontent_etcになるので
    メニューcontent5をアクティブすることができます
    ・もう一つはConents5に十分な高さを与えてあげればcontent_fourthからcontent_etcの
    敷居を越えるのでcontent_etcにアクティブが付きます

    キャンセル

  • 2017/11/15 11:10

    早速のご回答ありがとうございます。
    Conents5に十分な高さを与える。ということについて理解いたしました。
    仕様というのはこのscriptがブラウザの高さを越えたときにアクティブになる。ということでしょうか

    キャンセル

  • 2017/11/15 11:20

    > 仕様というのはこのscriptがブラウザの高さを越えたときにアクティブになる。ということでしょうか

    単純にいえば、最後の領域の高さが低ければアクティブが移らないという仕様です
    いいかればtop位置にあるものをアクティブにするという仕様です。
    今回の例でいえばcontent_etcの高さが不足しているときに実際にアクティブなのは
    content_fourthなのですから、メニューcontent4がアクティブなのが正しいと判断しています

    キャンセル

  • 2017/11/15 11:49

    仕様について、理解致しました。
    今日の問題についてはいちばん下のコンテンツに十分な高さを与えることで解決致しました。
    重ね重ねありがとうございます。
    例えばですが、今回のようなブラウザの高さに依存しない方法があるとしたらどうすれば良いでしょうか
    ヒントだけでも結構ですのでご教示していただけたら幸いです。

    キャンセル

  • 2017/11/15 12:34

    調整したものも載せておきました。
    注意点:
    ・スクロールが非同期処理のようなので$.whenで処理します
    ・clickイベントが微妙なので殺します
    ・最後強制的にlocation.hrefを書き換えます

    キャンセル

  • 2017/11/15 13:00

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

    キャンセル

  • 2017/11/15 13:10

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

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

    キャンセル

  • 2017/11/15 14:01

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

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16461questions

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

  • jQuery

    6720questions

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