Question

我正在使用此示例创建具有视差的网站：http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

一切看起来都不错，但左边的导航有烦人的bug，当我从上到下使用导航步骤时，一切看起来都不错，但是当使用导航从下往上回来时，它无法检测到当前滑动。有谁知道如何解决这个问题？

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它从下到上显示当前页面不好

Answer 1

我通过设置变量'currentslide'来解决同样的问题，然后使用它来确定页面是向上还是向下滚动，并相应地抵消滚动量。所以：

//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');
currentslide=1; // new variable to determine current position

然后降低：

//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) {

    if (currentslide<dataslide){
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
        currentslide=dataslide;
    } else {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top -10
        }, 2000, 'easeInOutQuint');
        currentslide=dataslide;
    }

}

您可能需要根据您的网站调整-10的值。

jQuery goToByScroll滚动问题

1 个答案: