所以我试图抓住如何使功能工作的开始,而不仅仅是看到插件做我问的问题。例如,this插件在导航中单击这些div链接时会跳转到“跳转到”。我想要的是当你到达div的某个部分时它会跳到div的其余部分。从而完全切断导航栏,但利用缓动来到达文章/照片的其余部分等。
目前我正在使用Richard Shepard的视差脚本,我想扩展脚本以使用backgroundPosition:coordinates来触发滚动到事件。
为方便起见,我贴了他的代码。P.S。所有这些代码都在“应该”工作,它缺乏div之间的缓和,目前我的安装jquery.easing。
P.P.S。然而,我不确定我需要从哪里开始。所以,我想从已经在页面上获取用户位置的函数开始。
// On your marks, get set...
$(document).ready(function(){
console.log("loaded parallax");
// Cache the Window object
$window = $(window);
// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){
// Store some variables based on where we are
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// When the window is scrolled...
$(window).scroll(function() {
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) ) {
// console.log("scrolling background");
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $self.data('speed'));
// If this element has a Y offset then add it on
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$self.css({ backgroundPosition: coords });
// Check for other sprites in this section
$('[data-type="sprite"]', $self).each(function() {
// Cache the sprite
var $sprite = $(this);
// Use the same calculation to work out how far to scroll the sprite
var yPos = -($window.scrollTop() / $sprite.data('speed'));
var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
$sprite.css({ backgroundPosition: coords });
}); // sprites
}; // in view
}); // window scroll
}); // each data-type
}); // document ready
这是我的代码的开头//如果此部分在视图部分:
var windowheight = jQuery(window).height();
// console.log(yPos);
if (Math.abs(yPos) > windowheight/2) {
console.log("scrollto");
jQuery('#fourth').ScrollTo();
}