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

Question

我发现并正在尝试使用一个名为 stellar.js 的插件.主要是为网站创建视差效果，但是，我不是追求这种效果 - 我是追求它提供的其他效果:

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.

偏移定位示例:http://markdalgleish.com/projects/stellar.js/#show-offsets .当您滚动 div 时，它会捕捉/重新对齐到浏览器的边缘。我正在努力使它适用于垂直网站。

我运气不佳 - 由于我对 Javascript 和 jQuery 的知识还很新手。我认为这只是将水平方向转换为垂直方向的情况。

有没有人以前玩过这个插件，或者用过类似的场景，有什么提示吗？

带有所有代码的 jsFiddle:http://jsfiddle.net/2SH2T/

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

Answer 1

在寻找了一段时间好的解决方案后，我找到了这个 jQuery 插件——Snappoint!

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