滚动监听

来源：互联网发布：telent 端口编辑：程序博客网时间：2024/06/07 22:49

滚动监听（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')  });

阅读全文

0 0