Bootstrap 导航栏（连同顶部栏）锚标记在导航栏后面导航内容答案

【问题标题】：Bootstrap Navbar (along with topbar) anchor tag navigates content behind the navbarBootstrap 导航栏（连同顶部栏）锚标记在导航栏后面导航内容
【发布时间】：2017-03-03 03:03:29
【问题描述】：

我在同一页面中确实有顶部栏以及带有锚标记的导航栏。当我点击锚标签时，锚标签的内容确实在导航栏后面。请在下面找到代码：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”的内容将从页面顶部开始（在导航栏后面）。请注意，我在导航栏的顶部确实有顶部栏，滚动时的顶部栏（顶部栏）被隐藏，导航栏位于顶部。

另外请注意，我已经添加了索引页面（第一页）的代码，与我将用于其他页面（例如：服务、项目等）的顶部栏和导航栏的代码相同。请帮助我使我的导航栏正常运行。

【问题讨论】：

无法用提供的代码重现问题。缺少某些代码。看看这个CodePen，请把它分叉并完成它...或提供一个实时 URL。
这是使用固定导航栏（或顶部的任何固定内容）时的常见问题。 stackoverflow.com/questions/17181355/…
@LouysPatriceBessette 感谢您的代码笔，但我无法重现与我使用引导主题相同的内容，它确实需要几个主题预定义的 css 和 js。但是我粘贴了所有，但 codepen 不允许我认为。我将尝试通过其他方法向您展示现场网站的工作..
@LouysPatriceBessette 嗨，我在 w3school 中创建了代码，并在链接下方添加以识别问题。在这里，移动版本无法正常工作，但笔记本电脑尺寸的屏幕可以正常工作。链接：w3schools.com/code/tryit.asp?filename=FDBAQCN4F7W7
@LouysPatriceBessette 非常感谢您。感谢您花时间找出问题和解决方案。

标签： javascript jquery twitter-bootstrap navbar

【解决方案1】：

我得到了它的工作......
请阅读这些详细说明。

第一：
使用 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("");
});

【讨论】：

非常感谢..我花了几乎一整天的时间来解决这个问题，你帮助我摆脱了这个混乱..我从心底里感谢你，我感谢你花时间弄清楚找出问题和解决方案..
嗨，路易。对不起，我又出现了！你解决了我关于导航栏的问题。我正在做我的网站准备工作，需要再次研究这个问题。我无法理解var o = $( $(this).attr("href") ).offset(); 请您告诉我这个var o 是什么意思以及该值是如何计算的？ [我相信它指的是具有 id 为“第 1 节”等的正文部分，但我无法从 jQuery 代码中解释 - 我读为“选择具有 href 属性的元素”]。谢谢你..
嗨！让我们将这条线分解为 4 个部分。 1- var o 是一个变量声明，我称之为o。我可以称它为sectionPosition。它只是一个变量名。 2- $(this).attr("href") 返回导航栏中单击的锚点的href。所以当它被$()包裹时，它被解释为一个选择器，并以具有这个id的元素为目标，也就是目标section。
3- 现在我们有了要滚动到的元素...我们需要它的位置。 .offset() 用于查找它。它返回一个包含top 和left 位置的对象。这就是 o 变量现在包含的内容。 4- 所以要获得计算中需要的top 位置，o.top 返回目标部分的top 位置。这是距页面最顶部的距离（以像素为单位）。我们需要将页面滚动到减去导航栏高度的位置。 st 包含计算结果。
非常感谢您的时间 Louys。我完全理解了第 1,3 和 4 部分。只是为了确认我对 2nd 的理解（例如，如果我在导航栏中单击了第 1 部分）：$(this).attr("href") 返回#section1。现在我们已经将它包装在$() 中，因此它会像$(#section1) 一样，它会返回 ID 为“section1”的段落的偏移量......太棒了......你参考哪本书来了解所有这些 JQuery ？我想了解像 position() 和 offset() 这样的滚动事件。你是最棒的！！上帝保佑你..