Question

jQuery的：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        $(".class").addClass("bgposi");
        // $(".top").addClass("fixd");
        // $(".logo").addClass("maxwidth");
       if (scroll >= 50) {
        $(".class").addClass("bgposi");
        // $(".top").addClass("fixd");
        // $(".logo").addClass("maxwidth");
        }
    }

});

所以，基本上我的课程我正在添加滚动。当我使用.bgposi滚动浏览页面上的50px时，(window).scroll(function()正在移动背景图片位置。哪个工作正常，所以我的第一个if语句单独..但是，我试图用另一个if语句来反转它，当用户向上滚动时 - 这是我失败的地方..任何指针？

Answer 1

在第二个if语句中更正以下内容：

不要筑巢。
将比较运算符[ x[$0], x[$0+N], x[$0+2*N], ..., x[x.count-N+$0] ]更改为>=。
使用<=。

变化：

removeClass

要：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        $(".class").addClass("bgposi");
        // $(".top").addClass("fixd");
        // $(".logo").addClass("maxwidth");
       if (scroll >= 50) {
        $(".class").addClass("bgposi");
        // $(".top").addClass("fixd");
        // $(".logo").addClass("maxwidth");
        }
    }

});

您可以缓存一些重用的选择器（执行一次查找），如下所示：

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 50) {
    $(".class").addClass("bgposi");
    // $(".top").addClass("fixd");
    // $(".logo").addClass("maxwidth");
  } else if (scroll <= 50) {
    $(".class").removeClass("bgposi");
    // $(".top").removeClass("fixd");
    // $(".logo").removeClass("maxwidth");
  }
});

$(window).scroll(function() {
  var scroll = $(this).scrollTop();
  var $class = $(".class"),
    $top = $(".top"),
    $logo = $(".logo");

  if (scroll >= 50) {
    $class.addClass("bgposi");
    $top.addClass("fixd");
    $logo.addClass("maxwidth");
  } else if (scroll <= 50) {
    $class.removeClass("bgposi");
    $top.removeClass("fixd");
    $logo.removeClass("maxwidth");
  }
});

$(window).scroll(function() {
  var scroll = $(this).scrollTop();
  var $class = $(".class");

  if (scroll >= 50) {
    $class.addClass("bgposi");
  } else if (scroll <= 50) {
    $class.removeClass("bgposi");
  }
});

body {
  height: 200vh;
  background-color: peachpuff;
}
.class {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20%;
  background-color: dodgerblue;
}
.class.bgposi {
  background-color: purple;
}

如果窗口滚动量 - ＆gt;然后在jQuery中反转

1 个答案: