stellar.js - configuring offsets / aligning elemen

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 other effect it offers:

Stellar.js' most powerful feature is the way it aligns elements.

All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset.

An example of the offset positioning: http://markdalgleish.com/projects/stellar.js/#show-offsets . When you scroll over a div it snaps/realigns to the edge of the browser. I am trying to get this to work for a vertical website.

I am not having much luck - due to my novice knowledge of Javascript and jQuery. I thought it would just be a case of swapping around the horizontals to verticals.

Has anyone played with this plugin before, or used it for a similar scenario, and got any tips?

The jsFiddle with all the code: http://jsfiddle.net/2SH2T/

And the Javascript code:

var STELLARJS = {
    init: function() {
        var self = this;
        $(function(){
            self.$sections = $('div.section').each(function(index){
                $(this).data('sectionIndex', index);
            });

            self.highlightSyntax();
            self.handleEvents();

            self.debugOffsets.init();
            self.debugOffsetParents.init();

            self.initParallax();
        });
    },
    initParallax: function() {
        var isHomePage = $('body').hasClass('home'),
            $main = $('div.main');

        if (isHomePage) {
            $main.height($main.height() + $(window).height() - 1000);
        }

        if ($.browser.msie) {
            $('body').removeAttr('data-stellar-background-ratio').append('<div class="ie-bg" />');
        }

        $(window).stellar({
            horizontalOffset: !isHomePage,
            verticalScrolling: 40
        });
    },
    highlightSyntax: function() {
        $('pre').addClass('prettyprint');
        if (window.prettyPrint !== undefined) prettyPrint();
    },
    handleEvents: function() {
        var self = this,
            //Debounce function from Underscore.js
            debounce = function(func, wait) {
                var timeout;
                return function() {
                    var context = this, args = arguments;
                    var later = function() {
                        timeout = null;
                        func.apply(context, args);
                    };
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                }
            },
            handleScroll = function() {
                var scrollTop = $(window).scrollTop(),
                    sectionIndex = Math.round((scrollTop - 40) / self.$sections.first().outerHeight()),
                    $activeSection = self.$sections.eq(sectionIndex);

                if ($activeSection.length === 0) {
                    $activeSection = self.$sections.last();
                }

                if ($activeSection.length === 0) return;

                $(window).unbind('scroll.stellarsite');

                if (scrollLeft === 0) {
                    $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                } else {
                    $('html,body').animate({
                        scrollLeft: $activeSection.offset().left - 40
                    }, 600, 'easeInOutExpo', function() {
                        setTimeout(function(){
                            $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                        }, 10);
                    });
                }

                $(window).bind('mousewheel', function(){
                    $('html,body').stop(true, true);
                });

                $(document).bind('keydown', function(e){
                    var key = e.which;

                    if (key === 37 || key === 39) {
                        $('html,body').stop(true, true);
                    }
                });
            };

        if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
            $(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
        }
    },
    debugOffsets: {
        init: function() {
            this.$debug = $('#debugOffsets');

            if (window.location.href.indexOf('#show-offsets') > -1) {
                this.show();
            }
        },
        show: function() {
            this.$debug.fadeIn();
            $('body').addClass('debugOffsets');
            $('h2').append('<div class="debug-h2-label">Offset Parent (All parallax elements align when this meets the offsets)</div>');
        },
        hide: function() {
            this.debug.fadeOut;
            $('body').removeClass('debugOffsets');
        }
    },
    debugOffsetParents: {
        init: function() {
            this.$debug = $('#debugOffsets');

            if (window.location.href.indexOf('#show-offset-parents-default') > -1) {
                this.removeOffsetParents();
            }

            if (window.location.href.indexOf('#show-offset-parents') > -1) {
                this.show();
            }            
        },
        show: function() {
            this.$debug.fadeIn();

            $('body').addClass('debugOffsetParents');
            $('h2').append('<div class="debug-h2-label">New Offset Parent (All parallax elements align when this meets the offsets)</div>');
            $('h2').each(function(){
                $(this).find('div.constellation:last').append('<div class="debug-constellation-label">Default Offset Parents</div>');
            });
            $('body').addClass('debug');
        },
        removeOffsetParents: function() {
            $('body').addClass('debugOffsetParentsDefault');
            $('h2[data-stellar-offset-parent]').removeAttr('data-stellar-offset-parent');
        }
    }
};

STELLARJS.init();

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/