我正在建立一个视差网站,我在顶部有一个菜单。问题是,在触摸屏设备上,当我点击菜单项时,它会滚动到页面,但当我用手指滚动到另一个页面时,单击的按钮保持活动状态!
function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $('#Slide2').offset().top - (($('#Slide3').offset().top - $('#Slide2').offset().top) / 4);
var section3Top = $('#Slide3').offset().top - (($('#Slide4').offset().top - $('#Slide3').offset().top) / 2);
var section4Top = $('#Slide4').offset().top - (($('#Slide5').offset().top - $('#Slide4').offset().top) / 2);
var section5Top = $('#Slide5').offset().top - (($(document).height() - $('#Slide5').offset().top) / 2);;
$('.link1').removeClass('active');
$('.link2').removeClass('active');
$('.link3').removeClass('active');
$('.link4').removeClass('active');
$('.link5').removeClass('active');
$('.link1').removeClass('hover');
$('.link2').removeClass('hover');
$('.link3').removeClass('hover');
$('.link4').removeClass('hover');
$('.link5').removeClass('hover');
if($('html').hasClass('no-touch')){
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('.link1').addClass('active');
}
else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('.link2').addClass('active');
}
else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('.link3').addClass('active');
}
else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){
$('.link4').addClass('active');
}
else if ($(document).scrollTop() >= section5Top){
$('.link5').addClass('active');
}
}
}