滚动监听-CSDN博客

本文链接：https://blog.csdn.net/duola8789/article/details/73469323

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class

如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

向顶部导航添加滚动监听行为：

通过data属性，想body添加属性， date-target为带有bootstrap.nav组件的父元素的id

<body data-spy="scroll" data-target="#myHeader">

通过JS

$('body').scrollspy({ target: '.navbar-example' })

导航栏的html结构：

<header id="myHeader" >
  <div class="container">
    <div class="row">
      <div class="col-sm-2 col-xs-4 col-xs-offset-1 col-lg-offset-0 logo">
      </div>
      <nav class="navbar navbar-default navbar-static" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
              <span class="sr-only">切换导航</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"></a>
          </div>
          <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#myCarousel">HOME</a></li>
              <li><a href="#about-PE">关于品意<span class="visible-xs-inline visible-lg-inline">丨ABOUT PE-IDEA</span></a>
              </li>
              <li><a href="#case">案例展示<span class="visible-xs-inline visible-lg-inline">丨CASE Show</span></a></li>
              <li><a href="#joinUs">加入我们<span class="visible-xs-inline visible-lg-inline">丨Join US</span></a></li>
              <li><a href="#contactUs">联系我们<span class="visible-xs-inline visible-lg-inline">丨Contact US</span></a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</header>

点击导航页面会跳转到页面的具有相应ID的元素位置，可以为这一个过程添加一个小动画，让滚动更加平缓：

// 点击导航定位到锚点的动画效果
  $("#example-navbar-collapse").find('a').click(function () {
    $body.animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });

Bootstrap 附加导航（Affix）插件插件允许某个

固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该

会锁定在某个位置，不会随着页面其他部分一起滚动。

更多看这里。

自己用JS实现也很容易：

// 导航滚动
  $(document).scroll(function () {
    var $carousel1Height = $myCarousel1.height();
    if ($(this).scrollTop() > $carousel1Height) {
      $myHeader.css({
        'position': 'fixed',
        'top': 0
      });
    }
    else {
      $myHeader.css({
        'position': 'absolute',
        'top': $carousel1Height
      })
    }
  });
  $(window).resize(function () {
    $(document).triggerHandler('scroll')
  });