🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Section Snap is a jQuery plugin designed for one page scrolling website that provides window snapping functionality to a set of content sections.

scrolling One-Page-Scrolling

Documentation

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 	}); });

You May Also Like