Javascript 引导Navbar（连同topbar）锚定标记导航Navbar后面的内容_Javascript_Jquery_Twitter Bootstrap_Navbar

Javascript 引导Navbar（连同topbar）锚定标记导航Navbar后面的内容

javascript jquery twitter-bootstrap

Javascript 引导Navbar（连同topbar）锚定标记导航Navbar后面的内容,javascript,jquery,twitter-bootstrap,navbar,Javascript,Jquery,Twitter Bootstrap,Navbar,我在同一页中有顶栏和导航栏以及锚定标签。当我点击anchor标签时，anchortag的内容确实在导航栏后面。请查找以下代码：HTML: <body>  <div id="container">  <header id="header-wrap" class="sit

我在同一页中有顶栏和导航栏以及锚定标签。当我点击anchor标签时，anchortag的内容确实在导航栏后面。请查找以下代码：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 -->

以下是我在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“Whoware”的内容将从页面顶部（导航栏后面）开始。请注意，我确实在导航栏的顶部有顶栏，滚动条上的顶栏被隐藏，导航栏被放置在顶部

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

我让它工作了…
请阅读这些详细的解释

首先：
使用jQuery，您必须使用HTML中实际存在的选择器。
在您的脚本中，

“#toplinks

，

#toplnks

，

#toplnked

和

#fixedbar

完全没有提及任何内容

其影响是，您的脚本根本就没有被触发。您观察到的滚动效果是链接点击的自然默认行为

秒：
您有两个“特殊情况”，其中此脚本不应与其他链接执行相同的操作。

“第1部分”需要滚动至窗口位置零，以显示顶部导航

它不应计算偏移量。

“Section 4”打开一个子菜单，显示“Section 4-1”和“Section 4-2”。
由于此“Section 4”也是一个链接，您必须删除其无用的

href

属性（

href=“#”

）。
然后在脚本中，您必须检查是否定义了

$（this）.attr（“href”）

，以避免脚本错误。

我留下了许多解释性的

console.log（）

，因为我非常确定您将使用此菜单向其中添加元素

您肯定会注意到脚本在子菜单项上运行了两次。
这是因为该事件对其父事件（即“第4节”

）是“bubling”。
但这没什么大不了的

如果您试图停止这种“冒泡”效果，您将中断菜单上的引导操作。
因此，只需删除或注释掉最后一页上的所有

console.log（）

。
)()

这是脚本
这里有一个，你可以玩（看看我是如何使它工作的）

无法用提供的代码重现问题。缺少某些代码。请查看此代码，然后将其分叉并完成…或提供一个实时URL。使用固定导航栏（或顶部的任何固定内容）时，这是一个常见问题@LouysPatriceBesette谢谢你的代码笔，但我无法复制与我使用引导主题相同的内容，它确实需要几个预定义的css和js主题。但是我粘贴了所有内容，但我认为代码笔不允许。我将尝试通过其他方法向你展示现场网站工作。@LouysPatriceBesette嗨，我已经在w3s中创建了代码选择并在链接下方添加以确定问题。在这里，移动版本无法正常工作，但笔记本电脑大小的屏幕可以正常工作。链接：@LouysPatriceBesette非常感谢您。我非常感谢您花时间找出问题和解决方案。非常感谢您。我花了几乎一整天的时间来解决问题，您帮助我找到了解决方案走出这片混乱。我从心底感谢你，感谢你花时间找出问题和解决方案。你好，卢伊斯。对不起，我再次出现！你解决了我关于导航栏的问题。我正在准备我的网站，需要再次研究这个问题。我无法理解

var o=$$（this）.attr（“href”）.offset（）；

您能告诉我这个var o是什么意思以及值是如何计算的吗？[我相信它指的是id为“section 1”的主体部分，等等，但我无法从jQuery代码中进行解释-我读作“select element have attribute of href”].谢谢..嗨！让我们把这行分解成4个部分。1-

var o

是一个变量声明，我称之为

。我可以称之为

sectionPosition

。它只是一个变量名。2-

$（this.attr）（“href”）

返回导航栏中单击的锚点的

href

。因此当它被

$（）

，它被解释为一个选择器，并以具有此id的元素为目标，该元素是目标

部分。3-我们现在有了要滚动到的元素…我们需要它的位置。用于查找它。它返回一个包含顶部
和左侧
位置的对象。这就是o
变量现在包含.4-为了获得计算中所需的top
位置，o.top
返回目标部分的top
位置。这是从页面顶部开始的距离，以像素为单位。我们需要页面滚动到该位置减去导航栏的高度。st
包含计算结果计算。非常感谢您的时间。我完全理解了第1、3和4部分。为了确认我对第2部分的理解（例如，如果我在导航栏中单击了第1部分）：$（此）。attr（“href”）
返回\section1
。现在我们将其包装在$（）
中，因此它将类似于$（\section1）它将返回ID为“section1”的段落的偏移量…太棒了。对于所有这些JQuery，你指的是哪本书？我想了解像position（）和offset（）这样的滚动事件…你是最好的！！上帝保佑你。。
$("#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);
});

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("");
});