Question

用户滚动后，我正在向div添加一个类。这可以正常工作，但是由于某些原因，当用户再次向后滚动时，它不会删除此类。控制台中没有错误。我要去哪里错了？

var scrolled = $('body').offset().top - 800;
$(window).on('resize scroll', function() {
  if ($(window).scrollTop() > scrolled) {
    $('#one').addClass('in');
  } else {
    $('#one').removeClass('in');
  }
});

section.bg-red {
  background: red;
}

section.bg-blue {
  background: blue;
}

section {
  min-height: 100vh;
}

section p {
  color: red;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

section.in p {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="bg-red" id="one">
  <p>Well done you scrolled</p>
</section>

<section class="bg-blue">
  ddd
</section>

View on Codepen

Answer 1

问题是您要从正文的偏移顶部减去800，这将产生一个负数。窗口的滚动顶部永远不会是负数，因此永远不会删除该类。

section.bg-red {
  background: red;
}

section.bg-blue {
  background: blue;
}

section {
  min-height: 100vh;
}

section p {
  color: red;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

section.in p {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="bg-red" id="one">
  <p>Well done you scrolled</p>
</section>

<section class="bg-blue">
  ddd
</section>
<script>
var scrolled = $('body').offset().top;
$(window).on('resize scroll', function() {
  if ($(window).scrollTop() > scrolled) {
    $('#one').addClass('in');
  } else {
    $('#one').removeClass('in');
  }
});
</script>

Answer 2

我找到了使用Waypoints.js的解决方案，该解决方案可以按需执行。所需要做的就是将waypoints.js包含到项目中，并在下面编写以下Javascript。

            var $elone = $('.element-one');
            $elone.waypoint(function(direction) {
                if (direction == 'down') {
                    $elone.addClass('in');
                }
                else {
                    $elone.removeClass('in');
                }
            }, {offset: '50%'});

这使您可以使用百分比而不是像素，这对于响应式网站效果更好。

滚动添加和删除类

2 个答案: