视差/Steller.js和Jquery路径点

Question

我正在使用Stellar.js并使用这里找到的演示:http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

我遇到了与演示页面相同的问题，即当页面首次加载时，导航(幻灯片1)不活动。只有当你开始向下滚动时，它才会变得活跃，然后当你回到幻灯片1时，它仍然是活跃的。

这是一个在FireFox和IE8(没有IE9测试)中发现的问题。

我确定这是一个航路点问题，而不是激活页面加载。我如何修复它，使"幻灯片1"在导航去它的活动类状态?

下面是来自演示的JS代码:

jQuery(document).ready(function ($) {

//initialise Stellar.js
$(window).stellar(
    {
    // Set scrolling to be in either one or both directions
    horizontalScrolling: true,
    verticalScrolling: true,    
    // Refreshes parallax content on window load and resize
    responsive: true,   

    }
    );
//Cache some variables
var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
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') {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
    }
    // 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 {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
    }
});

//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) {
        $('.navigation li[data-slide="1"]').addClass('active');
        $('.navigation li[data-slide="2"]').removeClass('active');
    }
});
//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: $('.slide[data-slide="' + dataslide + '"]').offset().top
    }, 2000, '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);
});

});

感谢您的帮助。

Answer 1

你应该看看jQuery Waypoints插件中可用的函数

第一个是尝试设置路径点插件的偏移设置稍微(http://imakewebthings.com/jquery-waypoints/#doc-disable)。这将使路径点在页面的不同位置触发，这样即使你在屏幕的顶部，第一个路径点也会触发。

//Setup waypoints plugin
slide.waypoint(function (event, direction) {
dataslide = $(this).attr('data-slide');
if (direction === 'down') {
    $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}    
else {
    $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
}, { offset:50 }); // The waypoint is triggered when the element is 50px from the top of the viewport.

或者你可以直接添加'active' CSS类到第一个元素，然后在滚动时改变。

希望对你有帮助。

Answer 2

您也可以直接在html中添加类，因为无论如何，当您滚动离开第一个元素时，脚本会删除该类。