jQuery Plugin To Snap To Next Section As You Scroll Through The Webpage - Section Snap

Section Snap is a jQuery plugin designed for one page scrolling website that provides window snapping functionality to a set of content sections. Great for enhancing the scrolling experience as the visitors scroll through your single page website.

See also:

• jQuery Plugin For Animated Vertical Scroll Snapping - Scrollsnap
• Easy jQuery Plugin For Vertical Scroll Snapping - Scrollify
• jQuery Plugin For Smooth Scroll Snapping - panelSnap
• jQuery Snap Scrolling Plugin For Single Page Website - snapscroll

How to use it:

1. Include jQuery javascript library and the jQuery section snap plugin in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery-sectionsnap.js" type="text/javascript"></script>

2. Create a set of sections/panels for your one page scrolling website.

<div class="demo">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

3. Call the plugin on the parent element and set the options.

$(document).ready(function() {
$(".demo").sectionsnap({
// time dilay (ms)
'delay': 100, 

// selector
'selector': ".section", 

// % of window height from which we start
'reference': .9, 

// animation time (snap scrolling)
'animationTime': 400, 

// offset top (no snap before scroll reaches this position)
'offsetTop': 0,

// offset bottom (no snap after bottom - offsetBottom)
'offsetBottom': 0 
});
});

Change logs:

2014-11-26

• FIX Options: offsetTop and offsetBottom

2014-07-05

• Bug Fix - onScroll - check if is animating

---

This awesome jQuery plugin is developed by rkuhl. For more Advanced Usages, please check the demo page or visit the official website.