Create a gist now

Instantly share code, notes, and snippets.

@craigprotzel /JS_Example_05
Created Aug 9, 2013

What would you like to do?
Download ZIP
Raw
JS_Example_05
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scroll demo</title>
<style>
div {
color:blue;
}
p {
color:green;
}
span {
color:red;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$( document ).ready( function(){
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
var scrollAmount = $('body').scrollTop();
console.log(scrollAmount);
});
});
</script>
</head>
<body>
<div>Try scrolling the iframe.</div>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
<p>Paragraph - <span>Scroll happened!</span></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment