Question

jQuery resize函数不起作用。我想在767宽度设备中提供自定义滚动但它不起作用。一般在767以上的设备滚动工作。我该如何解决？如果我只给出一个带有$(window).resize函数的单一条件，那么它也可以工作，但是当我给出else条件时，它再次无效。

    var about_us = $('#aboutus_area').offset();
    var testimonial = $('#testimonial').offset();
    var contact = $('#contact').offset();
    $('.aboutus_area').on('click',function(e){
        e.preventDefault();
        $('html,body').animate({ scrollTop : about_us.top },500);
    });

    $('.testimonial').on('click',function(e){
        e.preventDefault(); 
        $('html,body').animate({ scrollTop : testimonial.top },500);
    });

    $('.contact').on('click',function(e){
        e.preventDefault(); 
        $('html,body').animate({ scrollTop : contact.top },500);
    });  

$(window).resize(function(){

    if( $(window).width()<768 ){

        navbar = $('.navbar-collapse').height();
        var about_us = $('#aboutus_area').offset().top+navbar;
        var testimonial = $('#testimonial').offset().top+navbar;
        var contact = $('#contact').offset().top+navbar;
        $('.aboutus_area').on('click',function(e){
            e.preventDefault();
            $('html,body').animate({ scrollTop : about_us },500);
        });

        $('.testimonial').on('click',function(e){
            e.preventDefault(); 
            $('html,body').animate({ scrollTop : testimonial },500);
        });

        $('.contact').on('click',function(e){
            e.preventDefault(); 
            $('html,body').animate({ scrollTop : contact },500);
        });         

    }

});

Answer 1

我认为发生的事情是脚本顶部定义的click事件侦听器附加到对象上，然后每次调用resize事件时，它都会附加其他事件 - 但原始的事件不会因为你附上了别人。你可以尝试杀死任何点击事件处理程序，然后再分配新的处理程序，看看是否有帮助。

然而，可能有一个更容易的解决方案。由于您真正关心的事件是点击，为什么不在点击事件触发时检查窗口宽度？

这看起来像下面这样：

$('.aboutus_area').on('click', function (e) {
    e.preventDefault();

    var top = $('#aboutus_area').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

$('.testimonial').on('click', function (e) {
    e.preventDefault();

    var top = $('#testimonial').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

$('.contact').on('click', function (e) {
    e.preventDefault();

    var top = $('#contact').offset().top;

    //If window is < 768px wide, adjust scroll position
    if ($(window).width() < 768) {
        top += $('.navbar-collapse').height();
    }

    $('html,body').animate({scrollTop: top}, 500);
});

由于很多代码都是重复的，你可以用循环缩短它，这可能看起来像这样：

var elements = ["aboutus_area", "testimonial", "contact"];

elements.forEach(function (key) {
    $('.' + key).on('click', function (e) {
        e.preventDefault();

        var top = $('#' + key).offset().top;

        //If window is < 768px wide, adjust scroll position
        if ($(window).width() < 768) {
            top += $('.navbar-collapse').height();
        }

        $('html,body').animate({scrollTop: top}, 500);
    });
});

免责声明：我还没有测试过上面的代码，因此最好将其视为伪代码，而不是代码，只需删除它就可以了。可能需要一两个调整才能在你的项目中工作，但我认为这个想法很合理。

希望这有帮助！

jQuery resize（）函数不起作用

1 个答案: