Skip to content

jQuery plugin that will snap to next section after user scrolles over a HTML single page view

Notifications You must be signed in to change notification settings

rkuhl/sectionsnap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Mar 16, 2015
667580d · Mar 16, 2015

History

9 Commits
Jun 27, 2014
Mar 16, 2015
Nov 25, 2014
Mar 16, 2015

Repository files navigation

alt tag jquery-sectionsnap.js

jQuery plugin that will snap to next section after user scrolles over a HTML single page view, by Roman Kühl.

Example

Check out the example.
HTML:

<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery-sectionsnap.js" type="text/javascript"></script>
<div class="sections-wrapper">
	<div class="section"> ... </div>
	<div class="section"> ... </div>
	<div class="section"> ... </div>
</div>

JS:

$(document).ready(function() {
	$(".sections-wrapper").sectionsnap();
});

Options

delay time delay (ms)
selector selector (default ".section")
reference [0-1] % of window height from which we start snaping (default .9)
animationTime snap scrolling animation time (ms)
offsetTop offset top (no snap before scroll reaches this position)
offsetBottom offset bottom (no snap after bottom - offsetBottom) JS:

$(document).ready(function() {
	$(".sections-wrapper").sectionsnap({
		delay 			: 100
		, selector 		: '.section'
		, reference 	: 1
		, animationTime : 600
		, offsetTop 	: 100
		, offsetBottom 	: 80
	});
});

About

jQuery plugin that will snap to next section after user scrolles over a HTML single page view

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published