Question

我试图使功能取决于屏幕尺寸：

var Scroll = function(ele) {
    if (ele.width() <= 991) {
        $("header").css('background', '#001128 none repeat scroll 0 0');
        $('.banner-area').css('margin-top', '200px');
        $(document).scroll(function() { console.log('less than 992'); });
    }

    if (ele.width() >= 992) {
        $("header").css('background', 'unset');
        $('.banner-area').css('margin-top', '0px');
        var scroll_pos = 0;
        $(document).scroll(function() {
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 485) {
                $("header").css('background', '#001128 none repeat scroll 0 0');
            } else {
                console.log('more than 991');
                $("header").css('background', 'unset');
            }
        });
    }
}

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

Scroll($('body'));

这实际上是一个有效的代码，但是当我使用Inspect Element-Toggle device toolbar来检查它是否在此大小下工作时，它是这样的：

如果加载宽度大于或等于992px：

当我滚动到485以下时，控制台将显示more than 991，header会将background更改为unset，但是当我将尺寸更改为小于992px时使用Inspect Element-Toggle device toolbar，当我尝试滚动时，控制台将显示less than 992并同时显示more than 991和header仍将更改其background改为unset，反之亦然。

注意：如果重新加载页面没有问题，只是使用Inspect Element-Toggle device toolbar

调整了屏幕宽度大小

Answer 1

这个问题是每次窗口调整大小时都会对document.scroll处理程序进行初始化，因此在第二次调整大小时，您将获得2个滚动处理程序，每个处理程序的大小都是一次调整大小。

相反，请在document.ready期间添加document.scroll并检查该处理程序中的大小：

var scroll = function(ele) {
  if (ele.width() < 992) {
    $("header").css('background', '#001128 none repeat scroll 0 0');
    $('.banner-area').css('margin-top', '200px');
  } else  {
    $("header").css('background', 'unset');
    $('.banner-area').css('margin-top', '0px');
  }
};

$(document).scroll(function() {
  if (ele.width() < 992) {
    console.log('less than 992');
  } else {
    console.log('more than 991');
    var scroll_pos = $(this).scrollTop();
    if (scroll_pos > 485) {
      $("header").css('background', '#001128 none repeat scroll 0 0');
    } else {
      $("header").css('background', 'unset');
    }
  }
});


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

scroll($('body'));

此屏幕宽度的功能仍适用于不同的屏幕宽度

1 个答案: