首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >粘滞的导航栏在滚动上闪烁

粘滞的导航栏在滚动上闪烁
EN

Stack Overflow用户
提问于 2020-01-16 23:58:51
回答 1查看 155关注 0票数 1

我有一个带有文本的粘性导航栏,它应该会在滚动中消失。如果该文本的内容超过几行,则导航栏将闪烁。我认为这与元素在文档高度上有重大变化有关,但我不确定如何修复它。

我已经将它从display: none切换到visibility: hidden,就像在上一个线程中建议的那样。它从所有内容的闪烁到只有更长的段落。我还尝试添加延迟的效果,但我似乎不能回应的实际问题,使文档高度改变,因此滚动位置改变,这可能是导致闪烁的效果。

代码语言:javascript
复制
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');
  }
}
代码语言:javascript
复制
body {
  height: 1500px;
  background: tomato;
}

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

.intro {
  color: $black;
  font-size: 1.7rem;
  text-align: center;
  max-height: 7rem;
  transition: max-height 0.4s ease;
}

.inactive {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease;
}
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <p class="intro">
    This is some text that should disappear without flickering <br> This is some text that should disappear without flickering <br> This is some text that should <strong>disappear</strong> without flickering <br> This is some text that should disappear
    without flickering <br> This is some text that should disappear without flickering <br>
  </p>
  Other text Other text Other text Other text
</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus finibus lorem, sed pulvinar est vestibulum et. Nunc semper ligula eget urna imperdiet ullamcorper. Etiam tristique consectetur ornare. Vestibulum ipsum mi, ultrices vitae tincidunt
  non, ornare sit amet dolor. Maecenas convallis sollicitudin nibh, in laoreet leo tristique eget. Donec vitae auctor risus. Integer mattis nibh ipsum, nec porttitor ligula commodo ac. Etiam pharetra elit sit amet magna hendrerit scelerisque. Nam vel
  imperdiet metus. Vestibulum lectus enim, tempus sed orci ut, fermentum consectetur nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut eros ex. Quisque lacinia viverra mauris sit amet convallis.
  Phasellus in neque risus. Quisque rutrum lacinia erat in cursus. Praesent imperdiet et est vitae tincidunt. Nulla leo massa, tempor consequat tincidunt aliquet, blandit id libero. Nullam condimentum dapibus dictum. Sed vel magna dignissim, maximus augue
  non, laoreet ante. Ut urna velit, porta vel mauris sit amet, suscipit efficitur nisi. Integer cursus bibendum tortor sit amet tempor. Proin eget turpis ipsum. Maecenas et quam ornare, imperdiet turpis mattis, fermentum diam. Mauris blandit fringilla
  euismod. Fusce in nunc est. Morbi fringilla pulvinar massa, pulvinar auctor ex eleifend ut. Integer eros lorem, viverra et tincidunt nec, aliquet at erat. Morbi sed dapibus eros. Nunc tristique ullamcorper porttitor. Class aptent taciti sociosqu ad
  litora torquent per conubia nostra, per inceptos himenaeos. Sed malesuada nunc tincidunt, faucibus purus eu, ultrices velit. Fusce non velit diam. Praesent ac vulputate libero, et dignissim justo. Mauris at felis efficitur dolor tincidunt hendrerit
  id at lacus. Curabitur sit amet elit arcu. Donec a elit felis. Aliquam laoreet placerat velit, sed molestie nisl congue vitae. Ut aliquet aliquam tincidunt. In ultricies suscipit efficitur. Sed ultrices ligula dui, non sodales massa pulvinar in. Nulla
  accumsan risus quam, sit amet mattis orci facilisis eget. Curabitur tempor porttitor nibh ac ultrices. Integer scelerisque, elit at auctor consectetur, leo enim pellentesque sem, et tristique nisl sem in magna. Aliquam vel egestas sapien. Fusce blandit
  lectus vitae molestie egestas. Aliquam varius, risus et viverra dapibus, urna tellus condimentum nisi, eget vehicula sapien risus eu neque. Praesent at tristique massa, at cursus nibh. Aliquam erat volutpat. Etiam cursus consequat bibendum. Sed suscipit
  ac dui vitae fermentum.
</p>

EN

回答 1

Stack Overflow用户

发布于 2020-03-03 12:39:09

您只需在.class(.nav)上使用此css回复您的css,我将被修复

代码语言:javascript
复制
.nav {
  background: white;
  position: fixed;
  top: 0px;
  left:0;
  right:0;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59773478

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档