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

问题描述

我试图缩小导航栏并在用户向下滚动时更改颜色，我试图使这种变化不会立即发生，所以我添加了一个过渡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','')
    }
});

解决方法

我通过将导航栏中的类From: PRIMARYNAME <PRIMARYEMAIL>更改为public List<GithubCustomApi> requestAPi(string input) { List<GithubItem> repo = Build(input); GithubUser user = BuildPerson(input); var userRepos = repo .Where(x => x.owner.id == user.id) .Select(x => new GithubCustomApi { fullname = user.full_name,email = user.email,userRepo = x,...}) .ToList(); return userRepos; } 解决了该问题。这会将sticky-top更改为fixed-top。

此问题已解决，因为粘性位置会以某种方式更改scrollTop计算。