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. Controller接口控制器3

    11.AbstractWizardFormController 向导控制器类提供了多步骤(向导)表单的支持(如完善个人资料时分步骤填写基本信息.工作信息.学校信息等) 假设现在做一个完善个人信息的功能 ...

  2. Gym - 100203I I WIN 网络流

    Gym - 100203I  I WIN 题意:一个n*m的矩阵包含W,I,N三种字符,问相邻的字符最多能组成不重叠的WIN. 思路:比赛的时候没有发现是网络流,,居然一度以为是二分图匹配,,写了一下 ...

  3. 未能将基于用户的Visual C++项目设置保存到user文件错误的解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 最近遇见一个诡异错误,将Win7家庭版升级到Win7旗舰版.然后使用原来安装的VS2008开发,保存工程时总是出现未能 ...

  4. angular4自定义组件非input元素实现ngModel双向数据绑定

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...

  5. 简单学习Python之路1

    如何在cmd中打开文件:先用win+R打开cmd界面,在已知到你自己要打开文件的地址之后比如(F:\workspace),你先按F:,然后在用cd workspace进入workspace的文件中,然 ...

  6. 【Django】视图系统

    目录 FBV 与 CBV 给视图加装饰器 使用装饰器装饰CBV 关于dispatch()方法 Request对象 与 Response对象 request对象 response对象 @ *** 一个视 ...

  7. vue2留言板

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

  8. jquery15 on() trigger() : 事件操作的相关方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. vue -- config index.js 配置文件详解

    此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...

  10. POJ 2394 Dijkstra

    题意: 思路: 裸的Dijkstra 爆敲一发模板 //By SiriusRen #include <queue> #include <cstdio> #include < ...