我在Bootstrap 4.1中工作，并且创建了一个模态对话框，其中包含选项卡，用于内容的选项卡窗格以及在选项卡窗格中滚动-一切正常。现在，我需要在选项卡窗格中添加一个粘性导航栏。我能够添加粘性导航栏，并且在Chrome中可以正常工作，但是在IE或Edge中，当用户向下滚动时，导航栏会滚动到视线之外，而不是粘性的。我需要弄清楚为什么会发生这种情况，以及如何使粘性导航栏卡在所有三种浏览器（Chrome，IE和Edge）中。
这是我在JSFiddle上的完整代码：https://jsfiddle.net/tsmolskow/aq9Laaew/256606/
以下是与导航栏相关的代码：
<!-- Modal -->
<div tabindex="-1" class="modal fade" id="MyNNSModal" role="dialog" aria-hidden="true" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="tabbable">
<!-- Nav Tabs, Modal Nav Bar -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link active" href="#aDepartments" data-toggle="tab">Departments</a></li>
<li class="nav-item active">
<a class="nav-link" href="#aResources" data-toggle="tab">Resources</a></li>
<li class="nav-item active">
<a class="nav-link" href="#aProcedures" data-toggle="tab">Procedures</a></li>
<li class="nav-item active">
<a class="nav-link" href="#aNews" data-toggle="tab">News</a></li>
</ul>
</div>
<div class="d-flex align-self-end">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="navbardrop">
<img src="Images/KoKoPelli.jpg" class="profile-picture"/></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Newsfeed</a></li>
<li><a class="dropdown-item" href="#">One Drive</a></li>
<li><a class="dropdown-item" href="#">Sites</a></li>
</ul>
</li>
</ul>
</div>
<!-- Close Button -->
<div>
<button class="close" aria-label="Close" type="button" data-dismiss="modal">
<span aria-hidden="true">
<img class="close-button" src="Images/close2.png" alt="close button"/>
</span>
</button>
</div>
</div>
<!-- Panes -->
<div class="modal-body">
<div class="tab-content">
<!-- Tab Panes -->
<div class="tab-pane active" id="aDepartments">
<%--<div class="container">--%>
<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">SharePointGypsy.com</a>
<div class="navbar-collapse collapse" id="stickyNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" id="A" data-toggle="modal" data-target="#">A</a></li>
<li class="nav-item active">
<a class="nav-link" id="B" data-toggle="modal" data-target="#">B</a></li>
<li class="nav-item active">
<a class="nav-link" id="C" data-toggle="modal" data-target="#">C</a></li>
<li class="nav-item active">
<a class="nav-link" id="D" data-toggle="modal" data-target="#">D</a></li>
</ul>
</div>
</div>
</nav>
<%-- </div>--%>
<div class="row">
<p></p>
<b>Department: A</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: B</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: C</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: D</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: E</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: F</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: G</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: H</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: I</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
<b>Department: J</b>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
</div>
</div>
</div>
</div>