javascript - 为什么固定 block 在滚动时闪烁？

Question

我需要在底部创建标题，并在用户滚动时将其固定在顶部。

为什么当我滚动固定标题时会闪烁？

这是一段代码:

$(document).scroll(function () {
	var bodyTop = $('body').scrollTop();
	var navOffset = $('.main-nav').offset().top;
	$('.main-nav').toggleClass('header-fixed', (bodyTop > navOffset));
});

.wrapper { height: 99000px; }
.header-fixed { 
      position: fixed !important; top: 0 !important; 
      bottom: none; background: yellow !important; }
 .main-nav { width: 100%; height: 72px; position: absolute; bottom:0; background: blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <nav class="main-nav">
    </nav>
</div>

https://jsfiddle.net/u3kk219d/

Answer 1

我已经将元素的 offsetTop 的计算移到了滚动之外，它只需要计算一次。通过这样做，它不会在您每次滚动时都进行奇怪的计算，并且可以修复闪烁。

var navOffset = $('.main-nav').offset().top;

$(document).on("scroll", function() {
  var bodyTop = $('body').scrollTop();
  $(".main-nav").toggleClass("header-fixed", (bodyTop > navOffset));
});

.wrapper {
  height: 99000px;
}

.header-fixed {
  position: fixed !important;
  top: 0 !important;
  background: yellow !important;
}

.main-nav {
  width: 100%;
  height: 72px;
  position: absolute;
  bottom: 0;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <nav class="main-nav">
  </nav>
</div>