stellar.js - configuring offsets / aligning elements for a vertical scrolling website?

Question

I have found, and am trying to use, a plugin called stellar.js. Primarily it is for creating a parallax effect for websites, but, I am not after this effect - I am after the

Answer 1

After searching for a good solution for a while, I found this jQuery plugin- Snappoint!

https://github.com/robspangler/jquery-snappoint

Answer 2

I think I have achieved what you are describing with the code below. Here is a JsFiddle: http://jsfiddle.net/E4uVD/7/

JQuery:

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = 300;
    $(window).mousedown(function() {
        $('html, body').stop();
    });
    $(window).mouseup(function(){
        var _cur_top = $(window).scrollTop();
        var totalHeight = $('#container').height();
        var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

        $('html, body').stop().animate({scrollTop: posToScroll}, 2000);
    });
});

HTML:

<div id="container">
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
    <div class="box">300px</div>
</div>

CSS:

body {
    height:2000px;
}
.box
{
    color: #fff;
    height: 300px;
    width: 300px;
    border: 1px solid white;
}
#container {
    height:3000px;
    width:300px;
    background-color:blue;
}

Answer 3

I modified the original code and came up with exact effect like in stellarjs.com. Instead it's vertical :)

Take a look: http://jsfiddle.net/E4uVD/38/