Bootstrap 4 .sticky-top在移动设备上无法正常工作

Question

我在网站的移动版本上的导航栏出现问题。它应该在向上和向下滚动时停留在页面的顶部，但相反，它会产生一个怪异的bug，有时会停留在页面的顶部，有时则不会，并且会卡在页面的某些位置。在桌面版本上，它可以正常工作。还请记住，我在导航栏之前插入了徽标，因此页面并非以它开头，而是以图像开头。有人可以帮忙吗？ 附注：我正在使用Bootstrap 4。

HTML：

<div align="center" class="logo-container">
<a class="navbar-brand" id="navbar-brand" href="index.html"><img src="img/logo.png" class="logo" /></a>

 <button class="navbar-toggler ml-auto hamburger" data-toggle="collapse" data-target="#mobile-nav">
   <i class="fas fa-bars fa-1x hamburger"></i>
 </button>

 <div class="collapse navbar-collapse" id="mobile-nav">
 <ul class="navbar-nav navbar-ul-1" id="navbar-nav">
   <li class="nav-item">
     <span class="nav-link" id="nav-news">News</span>
   </li>

   <li class="nav-item">
     <span class="nav-link" id="nav-biography">Biography</span>
   </li>

   <li class="nav-item">
     <span class="nav-link" id="nav-releases">Releases</span>
   </li>
 </ul>

 <img src="img/logo2.png" class="nav-item logo-list-bullet logo-rotate nav-logo2"/>

 <ul class="navbar-nav navbar-ul-2" id="navbar-nav">

   <li class="nav-item">
     <span class="nav-link">Merch</span>
   </li>

   <li class="nav-item">
     <span class="nav-link" id="nav-media">Media</span>
   </li>

   <li class="nav-item">
     <span class="nav-link" id="nav-contact">Contact</span>
   </li>
 </ul>