スクロールをして.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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/29 16:23