Skip to content

Instantly share code, notes, and snippets.

@kotaroito

kotaroito/gist:8083161

Created December 22, 2013 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kotaroito/8083161 to your computer and use it in GitHub Desktop.
Save kotaroito/8083161 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<div id="item-1" class="item" style="height: 100px; border-style: dotted">
テストだよ。
</div>
<div id="item-2" class="item" style="height: 100px; border-style: dotted">
テストだよ。
</div>
<div id="item-3" class="item" style="height: 100px; border-style: dotted">
テストだよ。
</div>
<div id="item-4" class="item" style="height: 100px; border-style: dotted">
テストだよ。
</div>
<div id="item-5" class="item" style="height: 100px; border-style: dotted">
テストだよ。
</div>
<script type="text/javascript">
( function (){
var targets;
var overpassed = function(ele, scrollTop) {
var rect = ele.getBoundingClientRect();
return rect.top < scrollTop ? true : false;
};
window.onload = function() {
targets = document.querySelectorAll(".item");
};
window.onscroll = function() {
var scrollTop = document.body.scrollTop;
var _rect;
var i;
for ( i = 0; i < targets.length; i++ ) {
if ( overpassed(targets[i], scrollTop) && !targets[i]._overpassed ) {
targets[i]._overpassed = true;
console.log(targets[i].id);
}
}
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment