javascript - 滚动时内容跳转

Question

我有一个使用 flexbox 设计的简单导航栏，如下所示：

<div id="nav-bar">

   <div class="nav-left">
       <div class="logo-contain">
               <img class="red visible" src="image01">
               <img class="white transparent" src="image02">
       </div>
   </div>
   <div class="nav-center">
       <ul>
           <li class="color01">01</li>
           <li class="color02">02</li>
           <li class="color03">...</li>
       </ul>
   </div>
   <div class="nav-right">
       <div class="box-panier"></div>
   </div>

</div>

我制作了一个非常简单的脚本，可以在滚动时更改导航栏的颜色，并且运行良好。问题是，当调用该脚本时，导航栏确实会发生变化，但 img 元素会移动到错误的位置。它应该位于 nav-left 块的中心，但它会跳到块的右侧。但是，如果我打开 chrome devtools 并更改 css 中的任何内容，例如取消选中/检查任何 css 属性，我的 img 元素正在更新并返回到正确的位置，居中。所以看起来当我的脚本被调用时，chrome 并没有很好地更新 css。

这是 jsfiddle 中完全相同的代码，只是在这里运行良好。我真的不知道出了什么问题，因为在我的网站上使用完全相同的代码无法正常工作。

> JSfiddle 代码

标签： javascriptjquerycssscroll