Scroll Spy不起作用 - Bootstrap

时间:2016-05-18 20:28:11

标签: javascript jquery twitter-bootstrap scroll

我不能为我的生活做好准备,为什么我不能让我的卷轴间谍工作。这是下面的代码。在我出错的人身上有什么东西跳出来吗?我读了很多这些帖子,无法想象自己。这是第一次通过滚动间谍,所以我主要是为W3schools或bootply复制代码。在设置间谍目标后,我正在使用ID #nav进行所有调用。任何帮助将不胜感激。

<body class="body" data-spy="scroll" data-target="#nav">
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-static-top" id="nav">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">#HappilyEverManca</a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#Section1">Home</a></li>
              <li><a href="#Section2">About Us</a></li>          
              <li><a href="#Section3">Location</a></li>
              <li><a href="#Section4">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container -->
    </div><!--/.navbar -->

使用JS

$(document).ready(function () {




    /* affix the navbar after scroll below header */
    $('#nav').affix({
          offset: {
            top: $('header').height()-$('#nav').height()
          }
    }); 

    /* highlight the top nav as scrolling occurs */
    $('body').scrollspy({ target: '#nav' })



    /* smooth scrolling for nav sections */
    $('#nav .navbar-nav li>a').click(function(){
      var link = $(this).attr('href');
      var posi = $(link).offset().top;
      $('body,html').animate({scrollTop:posi},700);
    });


});

0 个答案:

没有答案