Bootstrap Navbar（以及topbar）anchor标签可在导航栏后面导航内容
[英]Bootstrap Navbar (along with topbar) anchor tag navigates content behind the navbar
问题描述
我在同一页面中确实有topbar和带有锚标签的navbar。 当我单击定位标记时，定位标记的内容确实会在导航栏后面。 请在下面的代码中找到：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 -->
这是我的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;
}
}
这是我通过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);
});
因此，每当我单击锚标记时，ID“ whoweare”的内容将从页面顶部（导航栏后面）开始。 请注意，导航栏的顶部确实有topbar，滚动条上的topbar隐藏了，导航栏位于顶部。
还要注意，我已经添加了索引页面（第一页）的代码，将用于其他页面（例如：服务，项目等）的topbar和navbar的代码相同。 请帮助我使导航栏正常运行。
1 个解决方案
解决方案1
0 已采纳 2017-03-04 19:45:47
我工作了...
请阅读这些详细的说明。
首先 ：
使用jQuery，您必须使用HTML中实际存在的选择器。
在您的脚本中， "#toplinks ， #toplnks ， #toplnked和#fixedbar完全不涉及任何内容。
影响是您的脚本根本根本不会触发。 您观察到的滚动效果是链接单击的自然默认行为。
第二 ：
您有两个“特殊情况”，其中此脚本不应与其他链接做相同的事情。
- “第1节”需要滚动到窗口位置零才能显示
top-nav。
它不应计算偏移量。 - “第4节”打开一个子菜单，其中显示“第4-1节”和“第4-2节”。
由于此“第4节”也是链接，因此您必须删除其无用的href属性（href="#"）。
然后，在脚本中，必须检查是否已定义$(this).attr("href")以避免脚本错误。
我留下了很多解释性的console.log()因为我很确定您将使用此菜单向其中添加元素。
您肯定会注意到该脚本在子菜单项上运行了两次。
这是因为事件正在“冒泡”给它的父事件（“第4节” a ）。
但这没什么大不了的。
如果尝试停止这种“起泡”效果，则会破坏菜单上的Bootstrap操作。
因此，只需删除或注释掉最后一页上的所有console.log() 。
;）
这是脚本
这是一个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("");
});
Bootstrap 3：如何通过单击当前导航栏内容中的超链接链接到另一个导航栏？
[英]Bootstrap 3: How to link to another navbar by clicking a hyperlink in current navbar content?
Bootstrap导航栏下拉列表隐藏在html select选项之后
[英]Bootstrap navbar dropdown list hides behind html select option
当我单击导航栏上的锚点时，它会将我带到那里，但部分内容被导航栏本身隐藏
[英]When I click an anchor on a navbar it takes me there, but part of the content is hidden by the navbar itself
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
引导导航栏后面的空间
动态 Bootstrap 4 导航栏“活动”标签
在 Bootstrap 5 OffCanvas Navbar 中居中内容
Bootstrap 3：如何通过单击当前导航栏内容中的超链接链接到另一个导航栏？
对包含的内容网站进行Bootstrap Navbar调整
Bootstrap折叠的导航栏中有不同的内容
Bootstrap 4 导航栏右对齐搜索选项以及注册
Bootstrap导航栏下拉列表隐藏在html select选项之后
移动设备上的 Bootstrap Navbar 显示在其他一切之后
当我单击导航栏上的锚点时，它会将我带到那里，但部分内容被导航栏本身隐藏
相关标签