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

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:

    
300px
    
300px
    
300px
    
300px
    
300px
    
300px
    
300px
    
300px
    
300px
    
300px

CSS:

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