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）

通過 data 屬性調用

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap自定義樣式-bootstrap側邊導航欄的實現 bootstrap之滾動監聽滾動監聽： bootstrap 的scrollspy Django:bootstrap table自定義查詢實現 bootstrap-treeview 自定義實現雙擊事件如何將自定義的搜索參數便捷的添加到js方式的bootstrap table的參數中 css、js實現自定義滾動條的兩種方式 Bootstrap 遮罩層實現方式 thymeleaf給bootstrap自定義變量賦值 bootstrap table 自定義checkbox樣式