I am attempting to use Bootstrap affix (sticky content) to stick the tabs below my navigation after scrolling. Each tab contains an iframe webpage. The tabs are sticking correctly but the margins are reset. Is there a way to keep the margins after it is stuck? Here is my example below. Thanks!

<!-- Bookmark Icon -->

&nbsp;

<!-- Font Awesome -->

<!-- Bootstrap core CSS -->

<!-- Material Design Bootstrap -->

<!-- Template styles -->

<!--Navbar-->

<nav class="navbar navbar-expand-lg navbar-light white fixed-top">
<div class="container"><a class="navbar-brand" href="support.html"><img style="height: 50px; padding: 5px;" src="img/products/example/example_logo.svg" alt="example" /></a>
<button class="navbar-toggler" type="button">

</button>
<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
 <li class="nav-item"><a class="nav-link" href="index.html"><i class="fa fa-home"></i>Home</a></li>
 <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-th-large"></i>Products</a></li>
 <li class="nav-item active elegant-color"><a class="nav-link" style="color: #fff !important;" href="#"><i class="fa fa-comments"></i>Support<span class="sr-only">(current)</span></a></li>
 <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-envelope"></i>Contact</a></li>
</ul>
<a class="nav-link" href="#"><button class="btn btn blue-gradient btn-rounded waves-effect btn-md" type="button"><i class="fa fa-download"></i> DOWNLOAD</button></a>

</div>
</div>
</nav><!--/.Navbar-->
<div style="height: 100px;"></div>
<!-- Nav tabs -->
<ul id="#support" class="nav nav-tabs nav-justified mx-auto sticky">
 <li class="nav-item"><a class="nav-link active" role="tab" href="#print-panel"><img style="max-height: 25px;" src="img/products/print/print_logo.svg" /></a></li>
 <li class="nav-item"><a class="nav-link" role="tab" href="#image-panel"><img style="max-height: 25px;" src="img/products/image/image_logo.svg" /></a></li>
 <li class="nav-item"><a class="nav-link" role="tab" href="#dm-panel"><img style="max-height: 25px;" src="img/products/dm/dm_logo.svg" /></a></li>
</ul>
<!-- Tab panels -->
<div class="tab-content card embed-responsive embed-responsive-1by1"><!--Panel 1-->
<div id="print-panel" class="tab-pane fade in show active" role="tabpanel"></div>
<!--/.Panel 1-->
<!--Panel 2-->
<div id="image-panel" class="tab-pane fade" role="tabpanel"></div>
<!--/.Panel 2-->
<!--Panel 3-->
<div id="dm-panel" class="tab-pane fade" role="tabpanel"></div>
<!--/.Panel 3-->

</div>
<!--Footer-->

<footer class="page-footer center-on-small-only elegant-color"><!--Footer Links-->
<div class="container-fluid">
<div class="row">

<!--First column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">example</h5>
<ul>
 <li><a href="#!">About</a></li>
 <li><a href="#!">Contact</a></li>
 <li><a href="#!">Case Studies</a></li>
</ul>
</div>
<!--/.First column-->

<hr class="w-100 clearfix d-sm-none" />

<!--Second column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">Image</h5>
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</div>
<!--/.Second column-->

<hr class="w-100 clearfix d-sm-none" />

<!--Third column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">Print</h5>
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</div>
<!--/.Third column-->

<hr class="w-100 clearfix d-sm-none" />

<!--Fourth column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">DM</h5>
<ul>
 <li style="list-style-type: none;">
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</li>
</ul>
</div>
<!--/.Fourth column-->

<!--Fifth column-->
<div class="col-lg-2 col-md-6 ml-auto">
<h5 class="title font-bold mt-3 mb-4">SSO</h5>
<ul>
 <li><a href="#!">Overview</a></li>
 <li><a href="#!">Knowledge Base</a></li>
 <li><a href="#!">Support</a></li>
</ul>
</div>
<!--/.Fifth column-->

</div>
</div>
<!--/.Footer Links-->

<hr />

<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid"><a href="https://www.example.com"> example.com © 2018 </a></div>
</div>
<!--/.Copyright-->

</footer><!--/.Footer-->

<!-- SCRIPTS -->

<!-- JQuery -->

<!-- Bootstrap dropdown -->

<!-- Bootstrap core JavaScript -->

<!-- MDB core JavaScript -->

new WOW().init();

$(function () {
$(".sticky").sticky({
topSpacing: 90
, zIndex: 2
, stopper: "#support"
});
});