stellar.js - 为垂直滚动网站配置偏移/对齐元素？
问题描述：
我发现并试图使用一个名为stellar.js的插件。主要是用于创建网站的视差效果，但是，我不是这个效果后 - 我是它提供的其他效果：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();
答
我觉得我已经实现了你与下面的代码描述。这里是一个的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;
}
+0
完美，谢谢，就是我之后！我只是改变了mousedown滚动。 – DBUK
你看过他们的垂直页面背景的演示吗？ http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html – RemarkLima
是的，这个例子是一个没有元素捕捉到浏览器顶部的普通视差。我并不担心使用视差等。我只是在像这个例子的元素对齐功能之后：http://markdalgleish.com/projects/stellar.js/#show-offsets – DBUK