Bootstrap Navbar（以及topbar）anchor标签可在导航栏后面导航内容
[英]Bootstrap Navbar (along with topbar) anchor tag navigates content behind the navbar
问题描述
I do have the topbar along with navbar with anchor tag in the same page. 
我在同一页面中确实有topbar和带有锚标签的navbar。 When I click on the anchor tag the content of anchortag does go behind the navbar. 当我单击定位标记时，定位标记的内容确实会在导航栏后面。 Please find below the code: HTML: 请在下面的代码中找到：HTML：
<body>
<!-- Full Body Container -->
<div id="container">
<!-- Start Header Section -->
<header id="header-wrap" class="site-header clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-8 col-xs-6">
<!-- Start Contact Info -->
<ul class="contact-details hidden-xs">
<li>
<a href="contact.html">
<i class="icon-envelope">
</i>
<span class="hidden-xs">the email address</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-call-out">
</i>
<span class="hidden-xs"> Call Us: 123456789 </span>
</a>
</li>
</ul>
<!-- End Contact Info -->
</div>
<div class="col-lg-6 col-md-5 col-sm-4 col-xs-12">
<!-- Start Social Links -->
<ul class="social-list">
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-call-out">
</i>
</a>
</li>
<li class = "hidden-sm hidden-md hidden-lg">
<a href="#">
<i class="icon-envelope">
</i>
</a>
</li>
<li>
<a href="#" class="social-link facebook" title="Facebook" href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#" class="social-link twitter" title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#" class="social-link google" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a>
</li>
<li>
<a href="#" class="social-link linkdin" data-toggle="tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
<!-- End Social Links -->
</div>
</div>
</div>
</div>
<!-- End Top Bar -->
<!-- Start Logo & Navigation -->
<div id= "fixedbar" class="navbar navbar-default navbar-top" role="navigation" data-spy="affix" data-offset-top="50">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Toggle Nav Link For Mobiles -->
<div class="logo-wrapper">
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo6.png" alt="SB Construction">
</a>
</div>
</div>
<!-- Brand and toggle menu for mobile ends -->
<div class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "toplinks">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "toplnks">
<a href="#ourvision">
Our Mission
</a>
</li>
<li id= "toplnked">
<a href= "#ourvision">
Our Vision
</a>
</li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li>
<a class="active" href="index.html">Home</a>
<ul class="dropdown">
<li id= "mbil1">
<a href="#whoweare">
Who We Are
</a>
</li>
<li id= "mbil2">
<a href="#ourvision">
Our Vision
</a>
</li>
<li id= "mbil3">
<a href= "#ourmission">
Our Mission
</a>
</li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Navigation -->
<div class="clearfix"></div>
</header>
<!-- End Header Section -->
Here is my CSS: 这是我的CSS：
.top-bar {
background: #EEEEEE;
border-bottom: 1px solid #ddd;
}
.top-bar .contact-details li {
display: inline-block;
padding: 8px 0;
}
.top-bar .contact-details li a {
font-size: 14px;
display: block;
margin-right: 15px;
color: #999;
line-height: 32px;
}
.top-bar .contact-details li a i {
padding-right: 5px;
vertical-align: middle;
}
.top-bar ul.social-list {
float: right;
padding: 8px 0;
}
.navbar-top.affix {
width: 100%;
top: 0;
z-index: 9999999;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.navbar-top.affix .logo-wrapper {
margin-top: 15px;
margin-bottom: 18px;
}
.navbar-top.affix .logo-wrapper .navbar-brand img {
width: 100px;
}
.navbar-top.affix .navbar-nav > li {
padding: 15px 0!important;
}
.navbar-top.affix .search-side {
top: 15px;
}
.navbar-top.affix .full-search {
top: 67px;
}
.navbar {
margin-bottom: 0;
background: #fff;
border: none;
border-bottom: 1px solid #eee;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.logo-wrapper {
margin-top: 19px;
margin-bottom: 17px;
float: left;
}
.navbar-brand {
padding-bottom: 0px;
display: block;
height: auto;
padding-top: 0;
}
.navbar-default .navbar-nav {
margin-right: 5px!important;
position: relative;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav > li {
padding: 31px 0;
}
.navbar-default .navbar-nav > li > a {
color: #999;
display: block;
font-size: 14px;
font-family: 'Lato', sans-serif;
padding: 7px 16px;
text-transform: uppercase;
font-weight: 700;
border-radius: 0px;
position: relative;
overflow: hidden;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li > a.active {
color: #ffbb02;
}
.navbar-default .navbar-nav > li > a i {
margin: 0 -2px 0 -5px;
}
.navbar-default .navbar-nav .dropdown {
position: absolute;
left: 0;
top: 100%;
width: 260px;
background-color: #fff;
visibility: hidden;
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav > li.drop:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown li,
.sup-dropdown li {
position: relative;
border-bottom: 1px dotted #eee;
}
.dropdown li:last-child,
.sup-dropdown li:last-child {
border-bottom: none;
}
.dropdown li a,
.sup-dropdown li a {
display: block;
color: #666;
font-size: 14px;
font-family: 'Lato', sans-serif;
font-weight: 400;
padding: 11px 16px;
margin: 0;
text-decoration: none;
text-transform: capitalize;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
}
.dropdown li a i {
margin: 0 0 0 -4px;
}
.navbar-default .navbar-nav .sup-dropdown {
position: absolute;
left: 100%;
top: 0;
width: 260px;
background-color: #fff;
margin-top: 10px;
transition: margin-top 0.2s ease-in-out;
-moz-transition: margin-top 0.2s ease-in-out;
-webkit-transition: margin-top 0.2s ease-in-out;
-o-transition: margin-top 0.2s ease-in-out;
visibility: hidden;
z-index: 3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav li.drop .dropdown li:hover .sup-dropdown {
visibility: visible;
margin-top: 0;
}
.dropdown > li:hover > a,
.sup-dropdown li:hover > a {
color: #fff;
background-color: #ffbb02;
}
.dropdown li a.active,
.sup-dropdown li a.active {
color: #fff;
background-color: #ffbb02;
}
.nav > li.drop:hover ul.dropdown {
display: block;
-webkit-animation: drop-up 400ms ease both;
-moz-animation: drop-up 400ms ease both;
-o-animation: drop-up 400ms ease both;
animation: drop-up 400ms ease both;
}
@media screen and (max-width: 767px) {
.js #wpb-mobile-menu {
display: none;
}
.js .slicknav_menu {
display: block;
}
}
Here is my Javascript I searched through stackoverflow posts: 这是我通过stackoverflow帖子搜索的Javascript：
$("#toplinks, #toplnks, #toplnked").on('click','a', function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $("#fixedbar").outerHeight(true);
window.scrollTo(0,sT);
});
So whenever I click on the anchor tag the content of ID "whoweare" will start from top of the page (behind the navbar). 因此，每当我单击锚标记时，ID“ whoweare”的内容将从页面顶部（导航栏后面）开始。 Please note I do have topbar on the top of navbar, which(topbar) on scroll gets hidden and navbar placed at top. 请注意，导航栏的顶部确实有topbar，滚动条上的topbar隐藏了，导航栏位于顶部。
Also note, I have added the code for the index page (first page), the same code of topbar and navbar I will use for other pages (eg: services, projects etc). 还要注意，我已经添加了索引页面（第一页）的代码，将用于其他页面（例如：服务，项目等）的topbar和navbar的代码相同。 Please help me out to make my navbar functions properly. 请帮助我使导航栏正常运行。
1 个解决方案
解决方案1
0 已采纳 2017-03-04 19:45:47
I got it working... 我工作了...
Please, read these detailled explanations. 请阅读这些详细的说明。
first : 首先 ：
Using jQuery, you have to use selectors that actually exist in your HTML. 使用jQuery，您必须使用HTML中实际存在的选择器。
In your script, "#toplinks , #toplnks , #toplnked and #fixedbar just refer to absolutely nothing. 在您的脚本中， "#toplinks ， #toplnks ， #toplnked和#fixedbar完全不涉及任何内容。
The impact was that your script simply never triggered at all. 影响是您的脚本根本根本不会触发。 The scroll effect you were observing was the natural default behaviour of a link click. 您观察到的滚动效果是链接单击的自然默认行为。
Second : 第二 ：
You have two "special cases" where this script should not do the same thing as for the other links. 您有两个“特殊情况”，其中此脚本不应与其他链接做相同的事情。
- "Section 1" needs to scroll to window position zero in order to show the
top-nav.“第1节”需要滚动到窗口位置零才能显示top-nav。
It should not calculate an offset.它不应计算偏移量。 - "Section 4" opens a sub-menu showing "Section 4-1" and "Section 4-2". “第4节”打开一个子菜单，其中显示“第4-1节”和“第4-2节”。
Since this "Section 4" also is a link, you have to remove its uselesshrefattribute (href="#").由于此“第4节”也是链接，因此您必须删除其无用的href属性（href="#"）。
Then in the script, you have to check if$(this).attr("href")is defined to avoid script error.然后，在脚本中，必须检查是否已定义$(this).attr("href")以避免脚本错误。
I left many explicative console.log() because I'm pretty sure that you will play with this menu to add elements to it. 我留下了很多解释性的console.log()因为我很确定您将使用此菜单向其中添加元素。
You will certainly notice that the script runs twice on the sub-menu items. 您肯定会注意到该脚本在子菜单项上运行了两次。
That is because the event is "bublling" to its parent (the "Section 4" a ). 这是因为事件正在“冒泡”给它的父事件（“第4节” a ）。
But this is no big deal. 但这没什么大不了的。
If you try to stop this "bubbling" effect, you'll break the Bootstrap action on the menu. 如果尝试停止这种“起泡”效果，则会破坏菜单上的Bootstrap操作。
So just remove or comment out all console.log() on your final page. 因此，只需删除或注释掉最后一页上的所有console.log() 。
;) ;）
Here is the script 这是脚本
And here is a CodePen , which you can play with (and see how I made it working). 这是一个CodePen ，您可以使用它（并查看我是如何工作的）。
console.clear()
console.log("READY!");
$(".navbar-nav li").on('click','a', function(event){
event.preventDefault();
// Which link was clicked?
console.log($(this).attr("href"));
// Section 1 case:
if( $(this).attr("href")=="#section1" ){
$("body").scrollTop(0);
console.log("Window simply has to scroll to position: 0");
}
// Section 4 case (Or any link which triggers a sub-menu)
if(typeof($(this).attr("href"))=="undefined"){
console.log("This link shall NOT trigger a scroll.");
}
// All the other cases.
if(typeof($(this).attr("href"))!="undefined" && $(this).attr("href")!="#section1"){
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $(".navbar").outerHeight(true);
window.scrollTo(0,sT);
console.log("Section offset is: "+o.top);
console.log("Nav bar height is: "+$(".navbar").outerHeight(true));
console.log("Window has to scroll to position: "+sT);
}
// Just an empty console line for clarity.
console.log("");
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.