Question

当滚动大于890px时，我有一些可见的元素。但我有问题，元素必须在890px和920px之间可见，如果用户滚动更多920或小于890px我需要隐藏该元素。

我正在使用动画css在出现时向元素添加动画。

这就是我现在在JS中所拥有的

var $document = $(document),
    $elementField = $('.center-field');

$document.scroll(function () {
    if ($document.scrollTop() >= 890) {
        $elementField.stop().addClass("show animated bounceInDown");  
    }
});

现在当用户滚动超过890px时会出现，但是当用户返回时它会再次停留，是否有一些手表用户滚动？

Answer 1

你完成的代码是这样的：

每次滚动：
检查滚动是否超过890px
如果是这样，请添加课程

正如您所看到的，它并不包含隐藏元素的逻辑。您需要检查滚动是否小于890px并删除类。你可以尝试类似的东西（假设当你的节点没有显示它被隐藏时）：

var $document = $(document),
    $elementField = $('.center-field');

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

        if (scroll >= 890 && scroll <= 920) {
            $elementField.addClass("show animated bounceInDown").removeClass("fadeOut");  
        } else {
            $elementField.removeClass("show bounceInDown").addClass("fadeOut");  
        }
    });

Answer 2

对if条件稍微具体一点。

＆＃13;

var $document = $(document),
    $elementField = $('.center-field');

$document.scroll(function () {
  if ($document.scrollTop() >= 890 && $document.scrollTop() <= 920) {
    $elementField.css('color', 'tomato');  
  } else {
    $elementField.css('color', 'blue'); 
  }
});

＆＃13;

body {
  position: relative;
  height:1800px;
}

.center-field {
  position: absolute;
  top: 900px;
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>scroll down please</p>
<h1 class="center-field">Hello</h1>

＆＃13;

Answer 3

你不能隐藏在其他地方吗？

$document.scroll(function () {
if ($document.scrollTop() >= 890) {
    $elementField.stop().addClass("show animated bounceInDown");  
}else{
    $elementField.hide(); //or something like that
}

滚动点之间可见元素

3 个答案: