Browser snapping / animated

by DJS Baker

HTML

<div id="container">
    <div class="box red">300px</div>
    <div class="box green">300px</div>
    <div class="box yellow">300px</div>
    <div class="box grey">300px</div>
    <div class="box black">300px</div>
    <div class="box purple">300px</div>
    <div class="box orange">300px</div>
</div>

CSS

body {
    height:2000px;
}
.box
{
    color: #fff;
    height: 800px;
    width: 1200px;
    border: 1px solid white;
}

.red {background-color:red}
.green {background-color:green}
.yellow {background-color:yellow}
.grey {background-color:grey}
.black {background-color:black}
.purple {background-color:purple}
.orange {background-color:orange}

#container {
    height:8000px;
    width:1200px;
    background-color:blue;
}

JavaScript

var STELLARJS = {
    init: function() {
        var self = this;
        $(function(){
            self.$sections = $('div.box').each(function(index){
                $(this).data('sectionIndex', index);
            });
            
            self.handleEvents();
            
        });
    },
    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) / 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 (scrollTop === 0) {
                    $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                } else {
                    $('html,body').animate({
                        scrollTop: $activeSection.offset().top
                    }, 600, 'easeInOutExpo', function() {
                        setTimeout(function(){
                            $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                        }, 10);
                    });
 ...