使用鼠标滚轮时绝对定位的元素闪烁

Question

在this JSfiddle上使用鼠标滚轮向下滚动时，红色条上会出现闪烁。在my live page上可能更明显（请参见顶部菜单栏）。奇怪的是，使用滚动条进行滚动时不会发生这种情况。

我不知道是什么引起了与鼠标滚轮有关的闪烁。我应该补充一点，我只在滚动的前1-2次看到闪烁，此后不再出现。

$(function() {
  var sticky_navigation_location = $('.nav_primary').offset().top;

  function sticky_navigation() {
    var scroll_top = $(window).scrollTop();
    if (scroll_top > sticky_navigation_location) {
      $('.nav_primary').addClass('nav_primary_fixed');
    } else {
      $('.nav_primary').removeClass('nav_primary_fixed');
    }
  }
  
  sticky_navigation();
  $(window).scroll(function() {
    sticky_navigation();
  });
});

html,
body {
  margin: 0;
}

.wrapper {
  height: 8000px;
}

header {
  background: blue;
  height: 150px;
}

.nav_primary {
  background: red;
  height: 50px;
  width: 100%;
}

.nav_primary_fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <header></header>
  <nav class="nav_primary"></nav>
</div>