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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

jQuery

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

Q&A

解決済

1回答

1103閲覧

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

naza-reth

総合スコア11

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/11/14 10:27

編集2017/11/14 11:30

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/11/14 10:43

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

2017/11/14 11:02

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

2017/11/14 11: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 11:31

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

回答1

0

ベストアンサー

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

改良版

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

javascript

1<html> 2<head> 3<style> 4#menu-wrap { 5 position: fixed; 6} 7#menu{ 8text-align: left; 9 display: flex; 10margin: 0px; 11 padding-left: 20px; 12} 13#menu li { 14 display:inline; 15} 16#menu li:last-child a{ 17 border-right:1px solid #000000; 18} 19#menu a:hover{ 20 background-Color:yellow; 21} 22#menu a{ 23 width: 80px; 24 border:1px solid #000000; 25 border-right:0px; 26 padding-left: 5px; 27 padding-right: 5px; 28 display: inline-block; 29 text-decoration:none; 30} 31.contents { 32 height: 500px; 33} 34.active { 35 background-color: red; 36} 37#content_first,#content_third,#content_etc{background-Color:aqua;} 38#content_second,#content_fourth{background-Color:lime;} 39 40</style> 41<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 42<script> 43$(function() { 44 var list=[]; 45 ['#content_first', 46 '#content_second', 47 '#content_third', 48 '#content_fourth', 49 '#content_etc' 50 ].map(function(x){ 51 list.push({ 52 "min": $(x).offset().top, 53 "max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()), 54 "id": x, 55 })}); 56 var pre_pos = 0; 57 $(function() { 58 $('#menu a[href="' + location.hash + '"]').addClass('active'); 59 $('#menu a').on('click', function() { 60 $('#menu a').removeClass('active'); 61 $(this).addClass('active'); 62 $('html,body').animate({scrollTop:$($(this).attr("href")).offset().top }, 500, 'swing'); 63 }); 64 }); 65 66 $(document).on('scroll', function() { 67 var this_pos = $(window).scrollTop(); 68 var pre_id = get_id(pre_pos); 69 var this_id = get_id(this_pos); 70 if (pre_id !== this_id) { 71 if(this_id!==null){ 72 location.hash=this_id.substr(1,this_id.length); 73 $(window).scrollTop(this_pos); 74 }else{ 75 location.hash=""; 76 }; 77 $('#menu a').removeClass("active"); 78 $('[href="' + this_id + '"]').addClass("active"); 79 } 80 pre_pos = this_pos; 81 }); 82 function get_id(pos) { 83 var arr = list.filter(function(x) { 84 return x.min <= pos && x.max >= pos; 85 }); 86 if (typeof arr[0] == "undefined") return null; 87 return arr[0].id; 88 } 89}); 90</script> 91</head> 92<body> 93<nav id="menu-wrap"> 94 <ul id="menu"> 95 <li><a href="#content_first">Contents1</a></li> 96 <li><a href="#content_second">Contents2</a></li> 97 <li><a href="#content_third">Contents3</a></li> 98 <li><a href="#content_fourth">Contents4</a></li> 99 <li><a href="#content_etc">Contents5</a></li> 100 </ul> 101</nav> 102<div class="contents" id="content_first">1</div> 103<div class="contents" id="content_second">2</div> 104<div class="contents" id="content_third">3</div> 105<div class="contents" id="content_fourth">4</div> 106<div class="contents" id="content_etc">5</div> 107</body> 108</html>

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

javascript

1<html> 2<head> 3<style> 4#menu-wrap { 5 position: fixed; 6} 7#menu{ 8text-align: left; 9 display: flex; 10margin: 0px; 11 padding-left: 20px; 12} 13#menu li { 14 display:inline; 15} 16#menu li:last-child a{ 17 border-right:1px solid #000000; 18} 19#menu a:hover{ 20 background-Color:yellow; 21} 22#menu a{ 23 width: 80px; 24 border:1px solid #000000; 25 border-right:0px; 26 padding-left: 5px; 27 padding-right: 5px; 28 display: inline-block; 29 text-decoration:none; 30} 31.contents { 32 height: 500px; 33} 34.active { 35 background-color: red; 36} 37#content_first,#content_third,#content_etc{background-Color:aqua;} 38#content_second,#content_fourth{background-Color:lime;} 39 40</style> 41<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 42<script> 43$(function() { 44 var list=[]; 45 ['#content_first', 46 '#content_second', 47 '#content_third', 48 '#content_fourth', 49 '#content_etc' 50 ].map(function(x){ 51 list.push({ 52 "min": $(x).offset().top, 53 "max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()), 54 "id": x, 55 })}); 56 var pre_pos = 0; 57 $(function() { 58 $('#menu a[href="' + location.hash + '"]').addClass('active'); 59 $('#menu a').on('click', function(e) { 60 e.preventDefault(); 61 var me=$(this); 62 $.when($('html,body').animate({scrollTop:$($(this).attr("href")).offset().top }, 500, 'swing')).done(function(){ 63 $('#menu a').removeClass('active'); 64 me.addClass('active'); 65 location.href=me.attr('href'); 66 }); 67 }); 68 }); 69 70 $(document).on('scroll', function() { 71 var this_pos = $(window).scrollTop(); 72 var pre_id = get_id(pre_pos); 73 var this_id = get_id(this_pos); 74 if (pre_id !== this_id) { 75 if(this_id!==null){ 76 location.hash=this_id.substr(1,this_id.length); 77 $(window).scrollTop(this_pos); 78 }else{ 79 location.hash=""; 80 }; 81 $('#menu a').removeClass("active"); 82 $('[href="' + this_id + '"]').addClass("active"); 83 } 84 pre_pos = this_pos; 85 }); 86 function get_id(pos) { 87 var arr = list.filter(function(x) { 88 return x.min <= pos && x.max >= pos; 89 }); 90 if (typeof arr[0] == "undefined") return null; 91 return arr[0].id; 92 } 93}); 94</script> 95</head> 96<body> 97<nav id="menu-wrap"> 98 <ul id="menu"> 99 <li><a href="#content_first">Contents1</a></li> 100 <li><a href="#content_second">Contents2</a></li> 101 <li><a href="#content_third">Contents3</a></li> 102 <li><a href="#content_fourth">Contents4</a></li> 103 <li><a href="#content_etc">Contents5</a></li> 104 </ul> 105</nav> 106<div class="contents" id="content_first">1</div> 107<div class="contents" id="content_second">2</div> 108<div class="contents" id="content_third">3</div> 109<div class="contents" id="content_fourth">4</div> 110<div class="contents" id="content_etc">5</div> 111</body> 112</html>

投稿2017/11/14 10:56

編集2017/11/15 03:35
yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naza-reth

2017/11/14 12:03

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

2017/11/14 13:05

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

2017/11/14 13:09

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

2017/11/14 13:17

> ドロワーメニューのメニューをクリックすると、ドロワーメニューが閉じる の仕様がいまいちわからないのでなんとも言えません。 開発環境でみてエラーがでていないか確認しながら調整してみてください
naza-reth

2017/11/14 13:21

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

2017/11/14 13:52

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

2017/11/15 01:37

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

2017/11/15 01:53 編集

ああ、それはそういう仕様につくってあるからですね 例でいうとcontent_etcのdivの高さが、ブラウザの高さ以下であれば content_etcの先頭位置はブラウザのtopまできません (content_fourthがアクティブな状況) とくにスクロールをかけている関係で、content_third→content_fourthに 敷居をこえる時点でメニューContents4にアクティブが移ってしまうわけです (スクロール中メニューのアクティブが順次移動しているのが目視できますよね) 以上の仕様をふまえ ・スクロール終了後にContent5をクリックすればハッシュがcontent_etcになるので メニューcontent5をアクティブすることができます ・もう一つはConents5に十分な高さを与えてあげればcontent_fourthからcontent_etcの 敷居を越えるのでcontent_etcにアクティブが付きます
naza-reth

2017/11/15 02:10

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

2017/11/15 02:20

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

2017/11/15 02:49

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

2017/11/15 03:34

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

2017/11/15 04:00

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

2017/11/15 04:10

しつこくて申し訳ありませんが 「クリックしたところを必ずアクティブにする」は仕様としては間違っています つまり、「ページのTOP位置にあるものをアクティブにする」という原則が無視されています 具体的にはcontents5がアクティブになっている状態でマウススクロールでページを遡っていっても contents4はアクティブにならず、content_thirdに入った瞬間contents3にアクティブが移ります 見る人が見ると気持ち悪いと感じると思います。 あくまでも「間違っているのはわかっているけど、例外的にあえてこうしたい」という状態だと 十分理解した上で運用しないと予期せぬトラブルのもとになる可能性がありますのでご注意下さい
naza-reth

2017/11/15 05:01

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問