我正在使用以下示例创建具有视差的网站：http ://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html
一切看起来都不错，但是左侧的导航有烦人的错误，当我使用从上到下的导航步骤时，一切看起来都不错，但是当使用导航从下到上返回时，它无法检测到当前幻灯片。有谁知道如何解决这个问题？
jQuery脚本：
$(window).stellar();
//Cache some variables
var links = $('#menu').find('li');
slide = $('.section');
mywindow = $(window);
htmlbody = $('html,body');
//Setup waypoints plugin
slide.waypoint(function (event, direction) {
//cache the variable of the data-slide attribute associated with each slide
dataslide = $(this).attr('data-slide');
//If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the previous navigation link
if (direction === 'down') {
$('#menu li[data-slide="' + dataslide + '"]').addClass('current').prev().removeClass('current');
}
// else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and
//remove the active class from the next navigation link
else {
$('#menu ul li[data-slide="' + dataslide + '"]').addClass('current').next().removeClass('current');
}
});
//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class
//from navigation link slide 2 and adds it to navigation link slide 1.
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('#menu li[data-slide="1"]').addClass('current');
$('#menu li[data-slide="2"]').removeClass('current');
}
});
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.section[data-slide="' + dataslide + '"]').offset().top-1
}, 1000, 'easeInOutQuint');
}
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
//When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function
/*button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});*/
所以如果我在那里添加
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.section[data-slide="' + dataslide + '"]').offset().top-1
}, 1000, 'easeInOutQuint');
}
.offset().top-1然后导航当前菜单在从上到下滚动时显示错误值，如果+1则从下到上错误，如果我只离开.offset().top它显示当前页面从下到上错误。