Skip to content

Instantly share code, notes, and snippets.

@lettertwo
Created October 18, 2013 03:16
Show Gist options
  • Save lettertwo/7035980 to your computer and use it in GitHub Desktop.
Save lettertwo/7035980 to your computer and use it in GitHub Desktop.
sakabako/scrollMonitor#18
<html>
<head>
<style type="text/css" media="screen">
.spacer {
display: block;
height: 1600px;
}
.block {
display: block;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="one" class="block"></div>
<div class="spacer"></div>
<div id="two" class="block"></div>
<div class="spacer"></div>
<div id="three" class="block"></div>
<div class="spacer"></div>
<div id="four" class="block"></div>
<script src="jquery.js" type="text/javascript"></script>
<script src="scrollMonitor.js" type="text/javascript"></script>
<script>
$('.block').each(function (i, el) {
var watcher = scrollMonitor.create(el);
watcher.enterViewport(function () {
console.log('enter', $(el).attr('id'));
});
watcher.exitViewport(function () {
console.log('exit', $(el).attr('id'));
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment