滚动有一个抖动问题

Question

向下滚动页面时，粘性菜单已启用并且变得有点生涩。有什么问题以及如何获得流畅的动画。

var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
  if ($(window).scrollTop() > elementPosition.top + 150) {
    $('.head_section').fadeOut(100);
    $('.sticky-menu').fadeIn(100);
  } else {
    $('.head_section').fadeIn(100);
    $('.sticky-menu').fadeOut(100);
  }
});

.home {
  height: 2000px;
}
.head_section {
  height: 100px;
  width: 100%;
  background: black;
}
.sticky-menu {
  display: none;
  position: fixed;
  top: 0;
  background: red;
  height: 100px;
  right: 0;
  left: 0;
  z-index: 9999;
  transition: all 0.1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
  <div class="head_section"></div>
  <div class="sticky-menu"></div>
</div>

有什么解决方案吗？

Answer 1

在您的示例中，您对动画使用了jQuery。因此，您需要从CSS中删除transition。您只能使用一个jQuery或CSS，但在这种情况下不能同时使用两者。

var elementPosition = $('.head_section').offset();
$(window).scroll(function() {
  if ($(window).scrollTop() > elementPosition.top + 150) {
    $('.head_section').fadeOut(1000);
    $('.sticky-menu').fadeIn(1000);
  } else {
    $('.head_section').fadeIn(1000);
    $('.sticky-menu').fadeOut(1000);
  }
});

.home {
  height: 2000px;
}
.head_section {
  height: 100px;
  width: 100%;
  background: black;
}
.sticky-menu {
  display: none;
  position: fixed;
  top: 0;
  background: red;
  height: 100px;
  right: 0;
  left: 0;
  z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
  <div class="head_section"></div>
  <div class="sticky-menu"></div>
</div>