stellar.js - 为垂直滚动网站配置偏移/对齐元素？ [英] stellar.js - configuring offsets / aligning elements for a vertical scrolling website?
本文介绍了stellar.js - 为垂直滚动网站配置偏移/对齐元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我发现并尝试使用名为 stellar.js 的插件。主要是为网站创建视差效果，但是，我不是在这种效果之后 - 我是在它提供的其他效果之后：
Stellar.js最强大的功能就是它将元素对齐的方式。
当元素
偏移父元素满足元素边缘时，所有元素都将返回原始位置屏幕加或减你自己的
可选偏移量。
偏移定位的一个例子： http://markdalgleish.com/projects/stellar.js/#show-offsets 。当你滚动一个div时，它会捕捉/重新排列到浏览器的边缘。我试图让它适用于垂直网站。
由于我对Javascript和jQuery的新手知识，我没有太多的运气。我认为这只是将水平线交换为垂直线的一种情况。
以前有人使用过这个插件，或者用它来做类似的场景，提示？
以及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）;
$ b $ if（$ .browser.msie）{
$（'body'）。removeAttr（'data-stellar-background-ratio'）。append（'< ; div class =ie-bg/>'）;
$ b $（窗口）.stellar（{
horizontalOffset：！isHomePage，
verticalScrolling：40
}）;
}，
highlightSyntax：function（）{
$（'pre'）。addClass（'prettyprint'）;
if（window.prettyPrint！== undefined）prettyPrint（）;
}，
handleEvents：function（）{
var self = this，
// Underscore.js的Debounce函数
debounce = function（func，wait）{
var timeout;
返回函数（）{
var context = this，args = arguments;
var later = function（）{
timeout = null;
func.apply（context，args）;
};
clearTimeout（超时）;
timeout = setTimeout（稍后，等待）;
$ b $，
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'）;
$ b $ 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）;
}）;
$ b $（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。闪钻，去抖（handleScroll，500））;
debugOffsets {
init：function（）{
this。$ debug = $（'＃debugOffsets'）;
if（window.location.href.indexOf（'＃show-offsetsets）> -1）{
this.show（）;
}
}，
show：function（）{
this。$ debug.fadeIn（）;
$（'body'）。addClass（'debugOffsets'）;
$（'h2'）。append（'< div class =debug-h2-label>偏移父母（当满足偏移时所有视差元素对齐）< / div>'）;
}，
hide：function（）{
this.debug.fadeOut;
$（'body'）。removeClass（'debugOffsets'）;
$ b $ 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>新的偏移父母（所有视差元素在满足偏移时对齐）< / div>'）;
$（'h2'）。each（function（）{
$（this）.find（'div.constellation：last'）。append（'< div class =debug-constellation-标签>默认偏移父母< / div>'）;
}）;
$（'body'）。addClass（'debug'）;
}，
removeOffsetParents：function（）{
$（'body'）。addClass（'debugOffsetParentsDefault'）;
$（'h2 [data-stellar-offset-parent]'）。removeAttr（'data-stellar-offset-parent'）;
}
}
};
STELLARJS.init（）;
解决方案
我修改了原始代码，像在stellarjs.com。相反，它是垂直的：）
看一看： http： //jsfiddle.net/E4uVD/38/
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();
解决方案
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/
这篇关于stellar.js - 为垂直滚动网站配置偏移/对齐元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
