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

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

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

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

Q&A

解決済

1回答

1820閲覧

クラス名をスクロールイベントで追加する

SmithTarou

総合スコア16

JavaScript

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

0グッド

1クリップ

投稿2015/06/28 19:28

スクロールをして.fooが一定の高さに達したら.barに.bazというクラス名を一度だけ追加し
次の.fooが同じ位置に達したら.barに.bazを追加するといった事をやりたいのですが上手くいきません。
下記の書き方だと何度もbazというクラス名を何度も追加してしまい困っています。
大変恐縮ですがご教示よろしくお願いします

lang

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 html,body { 8 height: 100%; 9 } 10 .foo { 11 height: 100%; 12 margin-top: 50%; 13 } 14 </style> 15 <script> 16 window.onload = function () { 17 var _foo = document.querySelectorAll('.foo'); 18 var _bar = []; 19 (function () { 20 var i, 21 j, 22 k; 23 for (i = 0, j = 0; i < _foo.length; i++, j++) { 24 _bar[i] = _foo[j].childNodes; 25 for (k = 0; k < _bar[i].length; k++) { 26 _bar[i][k]; 27 } 28 } 29 })(); 30 (function () { 31 var _firing = window.document.documentElement.clientHeight / 2 || innerHeight / 2; 32 var _offsetY = []; 33 var _moveValue = []; 34 var i, 35 j, 36 k; 37 for (i = 0, j = 0; i < _foo.length; i++, j++) { 38 _offsetY[i] = _foo[j].getBoundingClientRect().top; 39 } 40 window.onscroll = function () { 41 _moveValue = document.documentElement.scrollTop || document.body.scrollTop; 42 for (i = 0; i < _bar.length; i++) { 43 for (k = 0; k < _bar[i].length; k++) { 44 if (_moveValue > _offsetY[i] - _firing) { 45 _bar[i][k].className += 'baz'; 46 } 47 } 48 } 49 } 50 })(); 51 } 52</script> 53</head> 54<body> 55 <ul class="foo"> 56 <li class="bar"></li> 57 <li class="bar"></li> 58 <li class="bar"></li> 59 </ul> 60 <ul class="foo"> 61 <li class="bar"></li> 62 <li class="bar"></li> 63 <li class="bar"></li> 64 </ul> 65 <ul class="foo"> 66 <li class="bar"></li> 67 <li class="bar"></li> 68 <li class="bar"></li> 69 </ul> 70</body> 71</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

クラス名に「baz」がなかったら、追加するという形にすればよろしいのではないでしょうか?

lang

1if(_bar[i][k].className.indexOf("baz") == -1){ 2 _bar[i][k].className += "baz"; 3}

といった具合にすれば、できると思います。

投稿2015/06/29 00:28

orange0190

総合スコア1698

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

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

SmithTarou

2015/06/29 16:23

お返事送れて申し訳ありません 上記のコード追加で思ったとおりの動作になりました ご回答ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問