jquery触摸屏菜单

时间:2014-08-14 13:29:10

标签: javascript jquery html

我正在建立一个视差网站,我在顶部有一个菜单。问题是,在触摸屏设备上,当我点击菜单项时,它会滚动到页面,但当我用手指滚动到另一个页面时,单击的按钮保持活动状态!

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');
        }
    }
}

0 个答案:

没有答案