Question

遇到问题，当窗口宽度大于1024px时，我的函数按预期工作，当我调整大小小于1024px时，按预期工作，但当我缩放时，它不会工作

我想要实现什么，运行scrollTop函数，但仅限于浏览器宽度小于1024px时。我似乎无法看到我犯过的错误。

这是我的Codepen和JS代码： Codepen

function buttonClick() {
  var width = $(window).innerWidth();  
  console.log( width );

  if ( width < 960 ) {
    $('.click').on('click', function() {    
      $('body').animate({ scrollTop: $('.div2').offset().top - 10 }, 300);
    });
  }  
}


$(function() { buttonClick(); })
$(window).on('resize',function() {
  buttonClick();
});

Answer 1

您的主要问题是，您在每个调整大小步骤中反复重新分配buttonClick() - 因此会向click添加多个.click处理程序...

我会这样做：

$(function() {

  function doIfLessThan960() {
    var width = $(window).innerWidth();  
    if ( width < 960 ) {
      $('html, body').animate({ scrollTop: $('.div2').offset().top - 10 }, 300);
    }  
  }

  $('.click').on('click', doIfLessThan960);

});

这是：定义按钮是否应该在我们点击后执行某些操作。

jsBin demo ←只有当窗口宽度小于960

时按钮才会起作用

jQuery调整大小不一致

1 个答案: