Skip to content

Instantly share code, notes, and snippets.

@chrisle

chrisle/scrollwaypoints.html

Last active May 28, 2021 06:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save chrisle/28dda02a281dda3864ce to your computer and use it in GitHub Desktop.
Save chrisle/28dda02a281dda3864ce to your computer and use it in GitHub Desktop.
Download ZIP
Scrolling + jQuery Waypoints
Raw
scrollwaypoints.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Download from here: http://imakewebthings.com/jquery-waypoints/ -->
<script src="https://raw.githubusercontent.com/imakewebthings/jquery-waypoints/master/waypoints.js"></script>
<style type="text/css">
/* A box that is 500px tall */
.content {
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="content" data-url="#1">
Content 1
</div>
<div class="content" data-url="#2">
Content 2
</div>
<div class="content" data-url="#3">
Content 3
</div>
<div class="content" data-url="#4">
Content 4
</div>
<div class="content" data-url="#5">
Content 5
</div>
<div class="content">
Footer
</div>
<script>
// When the user scrolls past the top of a <div> tag, change the URL.
var changeUrl = function() {
var url = $(this).data('url');
window.history.replaceState({}, '', url);
};
$('.content').waypoint(changeUrl);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment