在滚动引导程序上调整大小时，粘性导航栏出现故障/抖动答案

【问题标题】：Sticky navbar glitchy/shaky when resized on scroll bootstrap在滚动引导程序上调整大小时，粘性导航栏出现故障/抖动
【发布时间】：2020-08-21 10:10:00
【问题描述】：

我试图缩小导航栏并在用户向下滚动时更改颜色，我试图让这不会立即发生，所以我添加了一个过渡 css 属性以使这种变化逐渐变化。

但是，在测试了我的代码后，似乎出现了一个严重的故障。在某一时刻，导航栏上下剧烈晃动并出现故障。

谁能帮我解决这个问题？

我在这里看到了一个非常相似的问题：Bootstrap fixed navbar is glitchy and shaky on scrolling。但我看不到这个问题的答案。

我的代码如下。（JSFiddle：https://jsfiddle.net/koder613/vqxrg8p7/9/）

HTML：

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="/"><img src="https://live.staticflickr.com/5576/14671748429_f5887e51b0_b.jpg" width="200"  class="d-inline-block align-top" alt="Logo" loading="lazy"/></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </nav>
  
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>
  <p>
  Text to enable scroll
  </p>

CSS：

.navbar{
    padding: .6rem 1.3rem ;
    transition: all 0.5s;
}
.navbar-brand img{
    transition: all 0.5s;
}
.c4d4e4{
    background-color: #c4d4e4!important;
}

JavaScipt(jQuery)：

$(window).on('scroll', () => {
    if ($(window).scrollTop() > 80){
          $('.navbar').addClass('c4d4e4')
          $('.navbar-brand img').css('width', '20%')
    } else {
          $('.navbar').removeClass('c4d4e4')
          $('.navbar-brand img').css('width', '')
    }
});

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-4

【解决方案1】：

我通过将导航栏中的类 sticky-top 更改为 fixed-top 解决了这个问题。这会将position: sticky; 更改为position:fixed;。

这解决了问题，因为粘性位置会以某种方式改变 scrollTop 计算。

【讨论】：