如何控制Bootstrap Scroll间谍

时间:2018-09-19 06:19:13

标签: javascript jquery html css twitter-bootstrap-3

我已经开发了单页网站,并且当向下滚动特定部分的导航菜单项时,在标题导航中使用了Bootstrap滚动间谍。滚动时我使用了四个菜单项,第一个菜单和最后一个菜单在下划线。 但是我们在第三部分滚动第二部分菜单项带有下划线。请任何人帮助我 enter image description here 如果我单击“定价”菜单项“功能项目”下划线,但“定价”菜单应下划线,请帮助先生

参考:http://floretmedia.net/temp/pbee/

.navbrdr .active {
    border-bottom: 4px solid #86bd3a;
}
<body id="lcp1" data-spy="scroll" data-target=".navbar" data-offset="70">
<header>
  <div class="custom-container">
    <div class="header-right">
      <div class="navbar-holder"> <!-- navbar-holder -->
        <nav class="navbar navbar-default"> <!-- navbar-inverse -->         
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <div class="ease cf">
                <a class="navbar-brand" href="./">
                   <img src="images/logo.png" alt="sfatech Logo">
                </a>
              </div> 
           </div> <!-- /.navbar-header -->
             <div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
                <ul class="nav navbar-nav navbar-right navbrdr">
                  <li class="active"><a href="./">HOME </a></li>
                  <li><a href="#features"> FEATURES </a></li>
                  <li><a href="#plans">PRICING</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="includes/enquiry_form.php" class="signup fancybox" data-fancybox-type="iframe">SIGN UP</a></li>                 
                </ul> <!-- /.navbar-nav -->

             </div> <!--/.nav-collapse -->           
         </nav> <!-- /.navbar-inverse -->
      </div> <!-- /.navbar-holder -->
   </div><!-- header-right -->
  </div><!-- custom-container -->
</header>

1 个答案:

答案 0 :(得分:0)

当您单击“定价”或“功能”菜单时,导航没有触及该部分的ID。这就是为什么不起作用。

如果您在滚动时已选中它,则可以正常工作,这是因为它正在触摸该部分的ID。