0

この例を使用して視差のあるサイトを作成しています：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ておくと、現在のページが下から上に悪いと表示されます。

4

1 に答える 1

0

変数「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の値を調整する必要がある場合があります。

于 2013-07-31T09:59:11.937 に答える