시차/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 테스트하지 않음)에서 발견 된 문제입니다.

확실한 웨이 포인트 문제이며 페이지로드시 활성화되지 않습니다. 내비게이션의 "Slide 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 plugin과 함께 사용할 수있는 기능을 살펴 봐야합니다.

먼저 웨이 포인트 플러그인 오프셋 설정을 약간 (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. 

아니면 스크롤 할 때 변경 될 첫 번째 요소에 '활성'CSS 클래스를 추가 할 수 있습니다.

희망이 나중에 도움이됩니다.

Answer 2

어쨌든 첫 번째 요소에서 스크롤 할 때 스크립트가 클래스를 제거하기 때문에 html에 클래스를 추가 할 수도 있습니다.