stellar.js - 為垂直滾動網站配置偏移/對齊元素？

Question

我發現並試圖使用一個名為stellar.js的插件。 主要是為網站創建一個視差效果，但是，我不是在這個效果之后 - 我追求它提供的另一個效果：

Stellar.js最強大的功能是它對齊元素的方式。

當偏移父元素與屏幕邊緣相交時，所有元素將返回其原始位置 - 加上或減去您自己的可選偏移量。

偏移定位的一個例子： 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

Answer 2

我想我已經用下面的代碼實現了你所描述的內容。 這是一個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

我修改了原始代碼，並提出了像stellarjs.com中的確切效果。 相反，它是垂直的:)

看看： http ： //jsfiddle.net/E4uVD/38/