jQuery изменение размера() функция не работает

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?

Это будет выглядеть примерно так:

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

Отказ от ответственности: я не тестировал вышеуказанный код, поэтому лучше всего рассматривать его как псевдокод, в отличие от кода, который вы можете просто сбросить, и он просто сработает. Может потребоваться настройка или два для работы в вашем проекте, но я думаю, что идея звучит.

Надеюсь, это поможет!