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. PowerDesigner删除外键关系,而不删除外键列[转] 及编码格式

    PowerDesigner删除外键关系,而不删除外键列[转]  数据库 database  -> generate database ->format 设置为utf-8 PowerDesi ...

  2. 分享一个正则 选择html中所有的单标签

    var str = /\B<.+?>/g;

  3. css3 文字溢出 换行实现方案

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

  4. Codeforces Round #240 (Div. 2) 题解

    A: 1分钟题,往后扫一遍 int a[MAXN]; int vis[MAXN]; int main(){ int n,m; cin>>n>>m; MEM(vis,); ; i ...

  5. tensorflow学习之路-----简单卷积神经网路

    import tensorflow as tf#取数据,目的是辨别数字from tensorflow.examples.tutorials.mnist import input_data'''手动添加 ...

  6. FZU 1096 QS Network

    QS Network Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original ID: ...

  7. bzoj1084【SCOI2005】最大子矩阵

    1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 1946  Solved: 970 [Submit][id ...

  8. css3中关于伪类的使用

    目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...

  9. WPF 布局控件 之 DockPanel

    DockPanel为容器控件 主要了解其Dock属性和LastChildFill属性的使用 一.LastChildFill="True" 时 代码: <DockPanel L ...

  10. scaleType-模拟按钮加文字整天点击效果

    经常碰到这种情况,就是一个按钮下面有文字,我们点击按钮的时候,按钮跟文字的背景都是同时变化的.我们看下下面的效果 点击以后如下 如果想要实现这个方法,网上有很多的方法,主要就是自定义控件,或者是使用t ...