bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）

一、总结

一句话总结：通过监听滚动的高，判断滚动的高是否大于元素距离顶端的距离

1、如何知道屏幕滚动的高？

st=$(window).scrollTop();

2、如何知道元素距离顶端的距离？

offset的top属性

pt=$(this).offset().top;

3、bootstrap中如何实现滚动监听？

需要相对定位（relative positioning）

无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 <body> 元素。When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

通过 data 属性调用

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

4、如何选中除自己之外的其它元素？

最好就是not方法，not方法里面可以放jquery选择器选择的jquery对象

$('.navbar-nav li').not($('.'+idx)).removeClass('active');

二、滚动监听如何实现（bootstrap方式和自定义方式）

1、相关知识

需要相对定位（relative positioning）

无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式。大多数时候是监听 <body> 元素。When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

通过 data 属性调用

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

 
body {

  position: relative;

}
 
<body data-spy="scroll" data-target="#navbar-example">

  ...

  <div id="navbar-example">

    <ul class="nav nav-tabs" role="tablist">

      ...

    </ul>

  </div>

  ...

</body>
 

2、代码

bs滚动监听

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         body{

             padding-top:60px;

             position: relative;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/holder.min.js"></script>

 </head>

 <body data-spy='scroll' data-target='#mynav' data-offset='150'>

     <div class="container">

         <nav class="navbar navbar-inverse navbar-fixed-top" id='mynav'>

           <div class="container">

             <!-- Brand and toggle get grouped for better mobile display -->

             <div class="navbar-header">

               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                 <span class="sr-only">Toggle navigation</span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

               </button>

               <a class="navbar-brand" href="#">Brand</a>

             </div>

             <!-- Collect the nav links, forms, and other content for toggling -->

             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

               <ul class="nav navbar-nav">

                    <li class='active'><a href="#linux">linux</a></li>

                    <li><a href="#php">php</a></li>

                    <li><a href="#js">js</a></li>

                    <li><a href="#html5">html5</a></li>

               </ul>

             </div>

           </div>

         </nav>

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <div class="panel-title">

                     <h1 id='linux'>linux技术</h1>

                 </div>

             </div>

             <div class="panel-body">

                 <img src="holder.js/100%x500" alt="">

                 <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

             </div>

         </div>

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <div class="panel-title">

                     <h1 id='php'>php技术</h1>

                 </div>

             </div>

             <div class="panel-body">

                 <img src="holder.js/100%x500" alt="">

                 <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

             </div>

         </div>

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <div class="panel-title">

                     <h1 id='js'>js技术</h1>

                 </div>

             </div>

             <div class="panel-body">

                 <img src="holder.js/100%x500" alt="">

                 <p>js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!</p>

             </div>

         </div>

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <div class="panel-title">

                     <h1 id='html5'>html5技术</h1>

                 </div>

             </div>

             <div class="panel-body">

                 <img src="holder.js/100%x500" alt="">

                 <p>html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!</p>

             </div>

         </div>

     </div>

 </body>

 </html>

自定义滚动监听实例

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

         body{

             padding-top:60px;

             position: relative;

         }

         .list-group{

             position: fixed;

             top:200px;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.min.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.min.js"></script>

     <script src="bs/js/holder.min.js"></script>

 </head>

 <body data-spy='scroll' data-target='#mynav' data-offset='150'>

     <div class="container">

         <nav class="navbar navbar-inverse navbar-fixed-top">

           <div class="container">

             <!-- Brand and toggle get grouped for better mobile display -->

             <div class="navbar-header">

               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                 <span class="sr-only">Toggle navigation</span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

                 <span class="icon-bar"></span>

               </button>

               <a class="navbar-brand" href="#">Brand</a>

             </div>

             <!-- Collect the nav links, forms, and other content for toggling -->

             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

               <ul class="nav navbar-nav">

                    <li class='active linux'><a href="">linux</a></li>

                    <li class='php'><a href="">php</a></li>

                    <li class='js'><a href="">js</a></li>

                    <li class='html5'><a href="">html5</a></li>

               </ul>

             </div>

           </div>

         </nav>

         <div class="row">

             <div class="col-md-1">

                 <div class="list-group">

                     <a id='linux' href="javascript:" class="list-group-item active">linux</a>

                     <a id='php' href="javascript:" class="list-group-item ">php</a>

                     <a id='js' href="javascript:" class="list-group-item ">js</a>

                     <a id='html5' href="javascript:" class="list-group-item ">html5</a>

                 </div>

             </div>

             <div class="col-md-11">

                 <div class="panel panel-primary" idx='linux'>

                     <div class="panel-heading">

                         <div class="panel-title">

                             <h1>linux技术</h1>

                         </div>

                     </div>

                     <div class="panel-body">

                         <img src="holder.js/100%x500" alt="">

                         <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>

                     </div>

                 </div>

                 <div class="panel panel-primary" idx='php'>

                     <div class="panel-heading">

                         <div class="panel-title">

                             <h1>php技术</h1>

                         </div>

                     </div>

                     <div class="panel-body">

                         <img src="holder.js/100%x500" alt="">

                         <p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>

                     </div>

                 </div>

                 <div class="panel panel-primary" idx='js'>

                     <div class="panel-heading">

                         <div class="panel-title">

                             <h1>js技术</h1>

                         </div>

                     </div>

                     <div class="panel-body">

                         <img src="holder.js/100%x500" alt="">

                         <p>js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!js is very much!</p>

                     </div>

                 </div>

                 <div class="panel panel-primary" idx='html5'>

                     <div class="panel-heading">

                         <div class="panel-title">

                             <h1>html5技术</h1>

                         </div>

                     </div>

                     <div class="panel-body">

                         <img src="holder.js/100%x500" alt="">

                         <p>html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!html5 is very much!</p>

                     </div>

                 </div>

             </div>

         </div>

     </div>

 </body>

 <script>

 $(window).scroll(function(){

     $('.panel').each(function(){

         st=$(window).scrollTop();

         pt=$(this).offset().top;

         if(st>=(pt-200)){

             idx=$(this).attr('idx');

             $('#'+idx).addClass('active');

             $('.list-group-item').not($('#'+idx)).removeClass('active');

             $('.'+idx).addClass('active');

             $('.navbar-nav li').not($('.'+idx)).removeClass('active');

         }

     });

 });

 </script>

 </html>
 

bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）的更多相关文章

  1. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  2. bootstrap的滚动监听

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  4. 滚动监听（bootstrap）

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  5. Bootstrap滚动监听

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

  6. Bootstrap入门（二十六）JS插件3：滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  7. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  8. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  9. 滚动监听： bootstrap 的scrollspy

    滚动监听 bootstrap 的scrollspy,需要借助.nav样式,活动的部分是加 .active类.本身导航没有position:fixed,需要自己加入 滚动监听.只有滚动和监听,只有默认锚 ...

随机推荐

  1. 动态代理（jdk--cglib）

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类 ...

  2. avalon 笔记---Mr.wing

    Avalon笔记步骤一:引用js文件<script src="js/avalon.js"></script>步骤二:<script> var v ...

  3. 前端中url、href、src的详细含义

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  4. [Chromium文档转载，第002章]Mojo C++ Bindings API

    Mojo C++ Bindings API This document is a subset of the Mojo documentation. Contents Overview Getting ...

  5. Lua刚開始学习的人（一）--Lua 简单教学

    近期因为工作原因.临时木有<Oracle起步学习>续集.领导知道学习下Lua脚本语言.看了一周了.趁热打铁,留下点实用的东西吧. 本系列会主要针对宿主语言为 Delphi,原理都是一样的, ...

  6. Rails + rabl

    当我们使用rails generate scaffold的方式生成MVC的时候,rails会自己主动给我们生成一系列的文件,包含了怎样用json显示model的view.这样事实上默认了你的系统是一个 ...

  7. CentOS 开启 IPV6

    编辑网卡地址:#vi /etc/sysconfig/network-scripts/ifcfg-eth0IPV6INIT=yesIPV6FORWARDING=yesIPV6ADDR=2607:9000 ...

  8. vim 帮助文档汉化

    我们在使用vim 的时候,经常会碰到一些陌生的命令,这时候我们可以通过 :help *** 来查询一些命令的使用方法.不过呢,我们安装的vim默认的都是英文的,看起来很费劲,尤其是向我这样英语比较差的 ...

  9. 3.Maven之（三）Maven插件

    转自:https://yq.aliyun.com/ziliao/312162 Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,像编译是通过maven- ...

  10. 计算器-- 利用re模块 利用函数封装 第二版

    import re remove_parentheses = re.compile('\([^()]+\)') def Remove_Parentheses(obj, s): # 找到内层的括号并且返 ...