Question

当用户向下滚动时，我试图使一段文本消失，而当用户返回顶部时，该文本重新出现。它已经取得了一些初步的成果，远非一帆风顺，但是我注意到文本在某些时候以一种非常分散注意力的方式闪烁，我不确定问题是什么或如何解决。

var $win = $(window)
var $doc = $(document)

  $win.scroll(function(e) {
    scrollEffects();
  });

function scrollEffects() {
  var limit = 85;
  var scrolled = $win.scrollTop();
  if ($doc.scrollTop() >= limit) {
    $(".intro").addClass('inactive');
    //$('#banner-contents').css('opacity', 1 - (scrolled * .00280));
    // console.log('scrolled');
  } else {
    $(".intro").removeClass('inactive');
  }
};

body {
  height: 1500px;
  background: tomato;
}

.nav {
  background: white;
  position: sticky;
  top: 0px;
}

.intro {
  color: $black;
  font-size: 1.7rem;
  text-align: center;
}

.inactive {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="nav">
  <p class="intro"> This is some text that should disappear without flickering</p>
  
  Other text
</div>

Answer 1

将元素设置为display: none将使文档的布局呈现为该元素不属于该元素的样子。

因此，当您将inactive类添加到段落中时，父级nav-div的高度会发生变化（因为p.intro消失了）。当然，这也会影响滚动位置，滚动位置现在再次位于limit以下。反过来，这会删除p上的inactive类，从而再次更改布局...依此类推。这就是闪烁的原因。

使用visibility代替display：

.inactive {
    visibility: hidden;
}

编辑：

如果要逐渐减小段落的高度，可以使用css过渡：

.intro {
  color: $black;
  font-size: 1.7rem;
  text-align: center;
  max-height: 2rem; /* or something more appropriate */
  transition: max-height 1s ease;
}

.inactive {
   max-height: 0;
   overflow: hidden;
   transition: max-height 1s ease;
}

或者您可以将段落的高度与滚动位置绑定：

$('.intro').css('max-height', Math.max(0, 30 - (scrolled * .28)));

当然，在这种情况下，您需要在max-height: 30px;类上设置overflow: hidden;（或一些适合您的大小）和intro。另外，您将不需要inactive类。

滚动顶部闪烁

1 个答案: