Question

您好我有一个粘性导航，jquery在100px或更高的滚动顶部添加背景颜色。这就是jquery。

  $(window).scroll(function () {
    if ($(document).scrollTop() > 100) {
      $('header').addClass('sticky-nav-bg');
    }
    else {
      $('header').removeClass('sticky-nav-bg');
    }
  });

我想要做的只是在'if（$（document）.scrollTop（）＆gt; 100）'之后添加一个'和'，只在窗口大小大于768px时运行它。这是我尝试但没有用的。

 $(window).scroll(function () {
    if ($(document).scrollTop() > 100) && ($(window).width() > 768) {
      $('header').addClass('sticky-nav-bg');
    }
    else {
      $('header').removeClass('sticky-nav-bg');
    }
  });

Answer 1

您在if条件中添加了额外的（），因此您只需要替换此

if ($(document).scrollTop() > 100) && ($(window).width() > 768)

与

if ($(document).scrollTop() > 100 && $(window).width() > 768)

然后它将完美地为您服务。

Answer 2

根据其他答案，主要问题是您的if语法。要结合两个（或更多）条件，你可以在括号中使用这样

if(a && b){ ... }

但是，您的代码还有另一个问题，就像您预期的那样。你的逻辑目前会说（伪代码）

if scrolled beyound 100px and the screen is greater than 768px add a class else remove a class

逻辑上，这意味着在小于768px的屏幕上，当用户滚动时，它将不断尝试删除该类。

要更改此设置，请先检查屏幕大小，然后输入if以确定是添加还是删除该类。

$(window).scroll(function () { if($(window).width() > 768){ if ($(document).scrollTop() > 100) { $('header').addClass('sticky-nav-bg'); } else { $('header').removeClass('sticky-nav-bg'); } } });

jQuery如果那么和

2 个答案: