zoukankan      html  css  js  c++  java
  • bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式)

    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滚动监听

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9         }
    10         body{
    11             padding-top:60px;
    12             position: relative;
    13         }
    14     </style>
    15     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
    16     <script src="bs/js/jquery.min.js"></script>
    17     <script src="bs/js/bootstrap.min.js"></script>
    18     <script src="bs/js/holder.min.js"></script>
    19 </head>
    20 <body data-spy='scroll' data-target='#mynav' data-offset='150'>
    21     <div class="container">
    22         <nav class="navbar navbar-inverse navbar-fixed-top" id='mynav'>
    23           <div class="container">
    24             <!-- Brand and toggle get grouped for better mobile display -->
    25             <div class="navbar-header">
    26               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    27                 <span class="sr-only">Toggle navigation</span>
    28                 <span class="icon-bar"></span>
    29                 <span class="icon-bar"></span>
    30                 <span class="icon-bar"></span>
    31               </button>
    32               <a class="navbar-brand" href="#">Brand</a>
    33             </div>
    34 
    35             <!-- Collect the nav links, forms, and other content for toggling -->
    36             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    37               <ul class="nav navbar-nav">
    38                    <li class='active'><a href="#linux">linux</a></li> 
    39                    <li><a href="#php">php</a></li> 
    40                    <li><a href="#js">js</a></li> 
    41                    <li><a href="#html5">html5</a></li> 
    42               </ul>
    43             </div>
    44           </div>
    45         </nav>
    46 
    47         <div class="panel panel-primary">
    48             <div class="panel-heading">
    49                 <div class="panel-title">
    50                     <h1 id='linux'>linux技术</h1>    
    51                 </div>
    52             </div>
    53             <div class="panel-body">
    54                 <img src="holder.js/100%x500" alt="">
    55                 <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>
    56             </div>
    57         </div>
    58 
    59         <div class="panel panel-primary">
    60             <div class="panel-heading">
    61                 <div class="panel-title">
    62                     <h1 id='php'>php技术</h1>    
    63                 </div>
    64             </div>
    65             <div class="panel-body">
    66                 <img src="holder.js/100%x500" alt="">
    67                 <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>
    68             </div>
    69         </div>
    70 
    71         <div class="panel panel-primary">
    72             <div class="panel-heading">
    73                 <div class="panel-title">
    74                     <h1 id='js'>js技术</h1>    
    75                 </div>
    76             </div>
    77             <div class="panel-body">
    78                 <img src="holder.js/100%x500" alt="">
    79                 <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>
    80             </div>
    81         </div>
    82 
    83         <div class="panel panel-primary">
    84             <div class="panel-heading">
    85                 <div class="panel-title">
    86                     <h1 id='html5'>html5技术</h1>    
    87                 </div>
    88             </div>
    89             <div class="panel-body">
    90                 <img src="holder.js/100%x500" alt="">
    91                 <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>
    92             </div>
    93         </div>
    94     </div>    
    95 </body>
    96 </html>

    自定义滚动监听实例

      1 <!doctype html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>index</title>
      6     <style>
      7         *{
      8             font-family: 微软雅黑;
      9         }
     10         body{
     11             padding-top:60px;
     12             position: relative;
     13         }
     14 
     15         .list-group{
     16             position: fixed;
     17             top:200px;
     18         }
     19     </style>
     20     <link rel="stylesheet" href="bs/css/bootstrap.min.css">
     21     <script src="bs/js/jquery.min.js"></script>
     22     <script src="bs/js/bootstrap.min.js"></script>
     23     <script src="bs/js/holder.min.js"></script>
     24 </head>
     25 <body data-spy='scroll' data-target='#mynav' data-offset='150'>
     26     <div class="container">
     27         <nav class="navbar navbar-inverse navbar-fixed-top">
     28           <div class="container">
     29             <!-- Brand and toggle get grouped for better mobile display -->
     30             <div class="navbar-header">
     31               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
     32                 <span class="sr-only">Toggle navigation</span>
     33                 <span class="icon-bar"></span>
     34                 <span class="icon-bar"></span>
     35                 <span class="icon-bar"></span>
     36               </button>
     37               <a class="navbar-brand" href="#">Brand</a>
     38             </div>
     39 
     40             <!-- Collect the nav links, forms, and other content for toggling -->
     41             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     42               <ul class="nav navbar-nav">
     43                    <li class='active linux'><a href="">linux</a></li> 
     44                    <li class='php'><a href="">php</a></li> 
     45                    <li class='js'><a href="">js</a></li> 
     46                    <li class='html5'><a href="">html5</a></li> 
     47               </ul>
     48             </div>
     49           </div>
     50         </nav>
     51         
     52         <div class="row">
     53             <div class="col-md-1">
     54                 <div class="list-group">
     55                     <a id='linux' href="javascript:" class="list-group-item active">linux</a>
     56                     <a id='php' href="javascript:" class="list-group-item ">php</a>
     57                     <a id='js' href="javascript:" class="list-group-item ">js</a>
     58                     <a id='html5' href="javascript:" class="list-group-item ">html5</a>
     59                 </div>
     60             </div>
     61 
     62             <div class="col-md-11">
     63                 <div class="panel panel-primary" idx='linux'>
     64                     <div class="panel-heading">
     65                         <div class="panel-title">
     66                             <h1>linux技术</h1>    
     67                         </div>
     68                     </div>
     69                     <div class="panel-body">
     70                         <img src="holder.js/100%x500" alt="">
     71                         <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>
     72                     </div>
     73                 </div>
     74 
     75                 <div class="panel panel-primary" idx='php'>
     76                     <div class="panel-heading">
     77                         <div class="panel-title">
     78                             <h1>php技术</h1>    
     79                         </div>
     80                     </div>
     81                     <div class="panel-body">
     82                         <img src="holder.js/100%x500" alt="">
     83                         <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>
     84                     </div>
     85                 </div>
     86 
     87                 <div class="panel panel-primary" idx='js'>
     88                     <div class="panel-heading">
     89                         <div class="panel-title">
     90                             <h1>js技术</h1>    
     91                         </div>
     92                     </div>
     93                     <div class="panel-body">
     94                         <img src="holder.js/100%x500" alt="">
     95                         <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>
     96                     </div>
     97                 </div>
     98 
     99                 <div class="panel panel-primary" idx='html5'>
    100                     <div class="panel-heading">
    101                         <div class="panel-title">
    102                             <h1>html5技术</h1>    
    103                         </div>
    104                     </div>
    105                     <div class="panel-body">
    106                         <img src="holder.js/100%x500" alt="">
    107                         <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>
    108                     </div>
    109                 </div>
    110             </div>
    111         </div>
    112         
    113     </div>    
    114 </body>
    115 <script>
    116 $(window).scroll(function(){
    117     $('.panel').each(function(){
    118         st=$(window).scrollTop();
    119         pt=$(this).offset().top;
    120 
    121         if(st>=(pt-200)){
    122             idx=$(this).attr('idx');
    123             $('#'+idx).addClass('active');
    124             $('.list-group-item').not($('#'+idx)).removeClass('active');
    125 
    126             $('.'+idx).addClass('active');
    127             $('.navbar-nav li').not($('.'+idx)).removeClass('active');
    128         }
    129     });
    130 });
    131 </script>
    132 </html>
     
  • 相关阅读:
    ios中静态库的创建和使用、制作通用静态库(Cocoa Touch Static Library)
    ios-字符串替换-正则表达式-例子
    Android 中自定义仪表盘
    Android中控件AutoCompleteTextView的使用方法和一些属性
    用代码如何检测一个android程序是否在运行
    android 报错: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper;
    android中Zing二维码扫描,二维码生成
    gps数据上传防止android系统休眠
    Android中判断service是否在运行
    BottomSheetDialogFragment 如何设置高度和禁止滑动
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9358715.html
Copyright © 2011-2022 走看看