我正在玩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);
});
});
任何帮助都非常感激。
答案 0 :(得分:2)
您应该查看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类添加到第一个元素,然后在滚动时更改。
希望能帮到你。
答案 1 :(得分:0)
您也可以在html中添加该类,因为当您从第一个元素滚动时脚本会删除该类。