我对以下代码有疑问。
<header style="position: fixed; z-index: 999999; width: 100%;">
<nav class="navbar navbar-default navbar-fixed-top" style=" position: relative; margin-bottom:0;">
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-3">
<a class="navbar-company" href="http://www.premiersoftware.co.uk"> </a>
</div>
<div class="col-xs-12 col-sm-9 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-product" aria-expanded="false" aria-controls="navbar">
<span class="caret"></span>
</button>
</div>
<div id="navbar-product" class="navbar-collapse collapse mainlist">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.premiersoftware.co.uk/salonlite/">Salonlite</a></li>
<li><a href="http://www.premiersoftware.co.uk/premiersalon/">Premier Salon</a></li>
<li><a href="http://www.premiersoftware.co.uk/premierspa/">Premier Spa</a></li>
<li><a href="#">Core by Premier Software</a></li>
<li><a href="http://www.premiersoftware.co.uk/collegebypremier/">College by Premier Software</a></li>
</ul>
</li>
<!--<li>
<a href="#">About Us</a>
</li>-->
<li>
<a href="http://www.premiersoftware.co.uk/vacancies/">Careers</a>
</li>
<li>
<a href="http://www.premiersoftware.co.uk/gappt/">Partners</a>
</li>
<li>
<a href="http://www.premiersoftware.co.uk/support/">Support</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">News<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.premiersoftware.co.uk/news/">Premier News</a></li>
<li><a href="http://www.premiersoftware.co.uk/blog/">Premier Blog</a></li>
</ul>
</li>
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle grey" href="javascript:;" data-toggle="dropdown" id="navLogin">Login<span class="caret"></span></a>
<div class="dropdown-menu">
<h4 class="logintxt">Client Login</h4>
<p class="logintxt">Premier Softwares client login area allows you to manage your online premier web booking.</p>
<form class="form" id="dologin" action="../Web-Portal/doLogin.php" method="post">
<input name="txtSerial" id="txtSerial" class="form-control" type="text" placeholder="Serial number">
<input name="txtPostCode" id="txtPostCode" class="form-control" type="text" placeholder="Postcode">
<button type="submit" id="login-submit" class="btn">Login</button>
</form>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default product-nav-bar">
<div class="container">
<div class="row">
<div class="col-md-push-3 col-sm-push-3 col-lg-push-2 remove-padding-and-center col-xs-3 col-lg-3">
<a class="call" href="tel:01543466580">
<i class="fa fa-phone" aria-hidden="true"></i>
<div>01543 4666580</div>
</a>
</div>
<div class=" col-xs-6 col-sm-3 col-lg-2 col-md-pull-3 col-sm-pull-3 col-lg-pull-3">
<a class="navbar-brand" href="#"> </a>
</div>
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-push-2 nav-small">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="book-consultation-nav">
<a href="#contact-us" class="scroll-to" >Book a FREE Consultation</a>
</li>
<li class="nav-small-contact-us">
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
<li>
<a class="scroll-to" href="#marketing">Overview</a>
</li>
<li>
<a class="scroll-to" href="#features">Key Features</a>
</li>
<li>
<a class="scroll-to" href="#additional-reasons">In-Depth</a>
</li>
<li class="nav-small-brochure">
<a class="scroll-to" href="#brochure">View Core Brochure</a>
</li>
<li>
<a class="scroll-to" href="#casestudies">Testimonials</a>
</li>
<li>
<a class="scroll-to" href="#contact-details">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="hidden-xs col-lg-pull-5 col-sm-12 col-lg-2">
<a class="btn btn-primary book-consultation scroll-to" href="#contact-us" role="button">Book a FREE Consultation</a>
</div>
</div>
</div>
</nav>
</header>
<script>
$(".scroll-to").on('click', function(event)
{
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top -153
}, 800, function(){
window.location.hash = hash;
});
}
});
</script>
我使用bootstrap并且在彼此之上有两个可折叠导航。当我在较小屏幕（例如移动屏幕）中选择下方导航中的选项时，顶部导航将打开。
要查看此操作，请访问：
http://www.premiersoftware.co.uk/corebypremier/index9.php
真的，我只想让下方导航动画一页而不打开顶部。
任何建议都会受到赞赏。
由于
丹