Javascript stellar.js-为垂直滚动网站配置偏移/对齐元素？

我发现了一个插件，名为。主要是为网站创建视差效果，但我并不追求这种效果——我追求的是它提供的另一种效果：

js最强大的功能是对齐元素的方式

所有元素将返回到其原始位置 偏移父对象与屏幕边缘相交，加上或减去您自己的偏移 可选偏移量

偏移定位的示例：。当您在div上滚动时，它会捕捉/重新对齐到浏览器的边缘。我正试图让这个工作的垂直网站

我运气不太好——因为我对Javascript和jQuery的新手知识。我想这只是一个围绕水平线转换为垂直线的例子

以前有没有人玩过这个插件，或者在类似的场景中使用过它，并且得到了一些提示

JSFIDLE包含所有代码：

以及Javascript代码：

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();

var STELLARJS={
init:function（）{
var self=这个；
$（函数（）{
self.$sections=$（'div.section'）。每个（函数（索引）{
$（此）.data（'sectionIndex'，index）；
});
self.highlightSyntax（）；
self.handleEvents（）；
self.debugoffset.init（）；
self.debugOffsetParents.init（）；
自视差（）；
});
},
初始视差：函数（）{
var isHomePage=$（'body'）.hasClass（'home'），
$main=$（'div.main'）；
如果（iHomePage）{
$main.height（$main.height（）+$（window.height（）-1000）；
}
如果（$.browser.msie）{
$（'body'）.removeAttr（'data-stellar-background-ratio'）.append（''）；
}
$（窗口）。恒星({
水平偏移量：！isHomePage，
垂直滚动：40
});
},
highlightSyntax:function（）{
$（'pre'）.addClass（'prettyprint'）；
如果（window.prettyPrint！==未定义）prettyPrint（）；
},
handleEvents:function（）{
var self=这个，
//Underline.js中的Debounce函数
去盎司=函数（func，等待）{
var超时；
返回函数（）{
var context=this，args=arguments；
var later=function（）{
超时=空；
函数应用（上下文，参数）；
};
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
}
},
handleScroll=函数（）{
var scrollTop=$（窗口）.scrollTop（），
sectionIndex=Math.round（（scrollTop-40）/self.$sections.first（）.outerHeight（）），
$activeSection=self.$sections.eq（sectionIndex）；
如果（$activeSection.length==0）{
$activeSection=self.$sections.last（）；
}
如果（$activeSection.length==0）返回；
$（窗口）.unbind（'scroll.stellarsite'）；
如果（滚动左===0）{
$（窗口）.unbind（'scroll.stellarsite'）.bind（'scroll.stellarsite'，debounce（handleScroll，500））；
}否则{
$（'html，body'）。设置动画({
scrollLeft:$activeSection.offset（）.left-40
}，600，“easeInOutExpo”，函数（）{
setTimeout（函数（）{
$（窗口）.unbind（'scroll.stellarsite'）.bind（'scroll.stellarsite'，debounce（handleScroll，500））；
}, 10);
});
}
$（窗口）.bind（'mouseweel'，function（）{
$（'html，body'）.stop（true，true）；
});
$（文档）.bind（'keydown'，函数（e）{
var-key=e.which；
如果（键===37 | |键===39）{
$（'html，body'）.stop（true，true）；
}
});
};
if（window.location.href.indexOf（“#显示偏移父项默认值”）=-1{
$（window.bind（'scroll.stellarsite'，去盎司（handleScroll，500））；
}
},
调试偏移：{
init:function（）{
这个.$debug=$（“#debugoffset”）；
if（window.location.href.indexOf（'#show offset'）>-1）{
this.show（）；
}
},
show:function（）{
这是.$debug.fadeIn（）；
$（'body'）.addClass（'debugoffset'）；
$（'h2'）.append（'Offset Parent（当满足偏移量时，所有视差元素对齐））；
},
隐藏：函数（）{
这个.debug.fadeOut；
$（'body'）.removeClass（'debugoffset'）；
}
},
debugOffsetParents：{
init:function（）{
这个.$debug=$（“#debugoffset”）；
if（window.location.href.indexOf（'#show offset parents default'）>-1）{
这是。removeOffsetParents（）；
}
if（window.location.href.indexOf（'#show offset parents'）>-1）{
this.show（）；
}            
},
show:function（）{
这是.$debug.fadeIn（）；
$（'body'）.addClass（'debugOffsetParents'）；
$（'h2'）.append（'newoffset Parent（当满足偏移量时，所有视差元素对齐））；
$（'h2'）。每个（函数（）{
$（this）.find（'div.constellation:last'）.append（'Default Offset Parents'）；
});
$（'body'）.addClass（'debug'）；
},
removeOffsetParents:函数（）{
$（'body'）.addClass（'debugOffsetParentsDefault'）；
$（'h2[数据恒星偏移父项]）.removeAttr（'data-stellar-offset-parent'）；
}
}
};
STELLARJS.init（）；

我想我已经实现了您所描述的目标

$(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);
    });
});

<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>

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