Я работаю в Bootstrap 4.1 и создал модальное диалоговое окно с вкладками, панелями вкладок для содержимого и прокруткой на панелях вкладок - все это работает.Теперь мне нужно добавить Sticky Navigation Bar в панели вкладок.Я могу добавить липкую панель навигации, и это прекрасно работает в 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>