Skip to content

Instantly share code, notes, and snippets.

@tarnfeld

tarnfeld/index.html

Created October 2, 2011 22:53
Show Gist options
  • Save tarnfeld/1258078 to your computer and use it in GitHub Desktop.
Save tarnfeld/1258078 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll tracking
Raw
index.html
<html>
<head>
<title>thing</title>
<style type="text/css">
.section {
height: 600px;
background: red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
var start = $('.wrap .section h2 a[href="' + window.location.hash + '"]');
if (start.length > 0) {
$("html, body").animate({
scrollTop: $(start).offset().top - 10
}, 400);
}
$(window).scroll(function() {
var s = $(this).scrollTop(),
el = false
// Bounce scrolling on lion
if (s < 0) {
return;
}
$('.wrap .section h2 a[href^="#"]').each(function(i, e) {
var p = $(e).closest('.section').offset().top,
h = $(e).closest('.section').outerHeight(true);
if (!el && (s - p - h) <= 0) {
el = $(e);
}
});
if (el) window.location.hash = $(el).attr('href');
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="section">
<h2><a href="#first">First</a></h2>
</div>
<div class="section">
<h2><a href="#second">Second</a></h2>
</div>
<div class="section">
<h2><a href="#third">Third</a></h2>
</div>
<div class="section">
<h2><a href="#fourth">Fourth</a></h2>
</div>s
<div class="section">
<h2><a href="#fifth">Fifth</a></h2>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment