Bootstrap learning js plug-in article scrolling monitoring_html/css_WEB-ITnose

1、滚动监听

 

案例

 

滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。Bootstrap中文网左侧就是一个滚动监听的例子。

代码段：

 

[html]  view plaincopy

1. 5892e0545c7e816006169b1a16ba8f82  
2.             d9bf25ad056131a8f4943d012f115164  
3.             72206703d34851e53e122d07b6d014f8  
4.                 64952123ee1a1d9b385bc3bca58612f0Toggle-navigation54bdf357c58b8a65c66d7c19c8e4d114  
5.                 31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
6.                 31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
7.                 31672ff60d0b0a2998efee148654e4e954bdf357c58b8a65c66d7c19c8e4d114  
8.             65281c5ac262bf6d81768915a4a77ac0  
9.             0ab668699dd1f6ae23a90921fd486434Project Name5db79b134e9f6b82c0b36e0489ee08ed  
10.             16b28748ea4df4d9c2150843fecfba68  
11.             0cec7ff9bc25f2919af39864fa0f7f6c  
12.             bfa11fb4b31287f535cfbc7f7ef3c56c  
13.                 25edfb22a4f469ecb59f1190150159c65c986b36e2caf6ede780c710cb54ea2b@fat5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
14.                 25edfb22a4f469ecb59f1190150159c6e684030146a251e041eba58dbedfa2a3@mdo5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
15.                   
16.                 669703836e8c1866c76e0de8a4340b23  
17.                     735cbc0bef202a2a5e691b8f18848decDropdown  
18.                     12bdbd0acb84b74bc4f78c0ea70b0e740d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed  
19.                     371cd0336d4a11c7de58661075fff750  
20.                         25edfb22a4f469ecb59f1190150159c649d0433c2c176756b3cef9b807bfb52fone5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
21.                         25edfb22a4f469ecb59f1190150159c69d0a5b9595ea2bd5245917112615049etwo5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
22.                         1ba080d535072e9eeeb0bd2074d14f99bed06894275b65c1ab86501b08a632eb  
23.                         25edfb22a4f469ecb59f1190150159c69cc6d7cf211c9ee1158fa9fc1d9098fathree5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb  
24.                     929d1f5ca49e04fdcb27f9465b944689  
25.                 bed06894275b65c1ab86501b08a632eb  
26.                   
27.             929d1f5ca49e04fdcb27f9465b944689  
28.             16b28748ea4df4d9c2150843fecfba68  
29.               
30.         44f9630a3d507ae7532760da37622b0f  

[html]  view plaincopy

1. 599ade111fbfad5a3d948bca38432bed  
2. 6dcf50d3976e78f4f4688e76c079a7e5          54bdf357c58b8a65c66d7c19c8e4d114 5b1785af3ec5128cf70592f639664e35@fat0f6dfd1e3624ce5465eb402e300e01ae  
3.         e388a4556c0f65e1904146cc1a846beeAd leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.94b3e26ee717c64999d7867364b1b4a3  
4.         3c4359e90d9571bab85107e38dc90d6f@mdo0f6dfd1e3624ce5465eb402e300e01ae  
5.         e388a4556c0f65e1904146cc1a846beeVeniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson  1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.94b3e26ee717c64999d7867364b1b4a3  
6.         559b363400d2024a3b79a8b3f9051948one0f6dfd1e3624ce5465eb402e300e01ae  
7.         e388a4556c0f65e1904146cc1a846beeOccaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.94b3e26ee717c64999d7867364b1b4a3  
8.         a65eceddc3dde1c2d98d5440a8bf6fdetwo0f6dfd1e3624ce5465eb402e300e01ae  
9.         e388a4556c0f65e1904146cc1a846beeIn incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch  1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.94b3e26ee717c64999d7867364b1b4a3  
10.         3c0ca63bf97062e64758ed282b9dc6c8three0f6dfd1e3624ce5465eb402e300e01ae  
11. e388a4556c0f65e1904146cc1a846beeAd leggings keytar, brunch id art party pain labore. Pitchfork yr enemi lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim Keffiyeh Carles Cardigan. Velit Seitan Mcsweeney's Photo Booth 3 Wolf Moon Irure. Cosby sweater back jean shorts, williamsburg hoodie minim who you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil Tattooed Accusamus, Cred Irony Biodiesel Keffiyeh Artisan Ullamco Consequat.94b3e26ee717c64999d7867364b1b4a3  
12. 03e6c752870e0537068d4381a86861d4Keytar twee blog, blame messenger bag marfa whatever delectus food truck. Sapient synth id assumes. Locavore sweet helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore Elite Placeat Before They Sold Out, Terry Richardson Proident Brunch Nesciunt Quis Cosby Sweater Pariatur Keffiyeh Ut Helvetica Artisan. Cardigan craft beer seat readymade outside. VHS chambray labor time venam. Anim mollit minimum commode ullamco thundercats.  
13. 94b3e26ee717c64999d7867364b1b4a3  
14. b673c3c43998365ff6c16cc8be7e22fc      54bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68  

Specific:

Specific

Specific data type

If you want to create a specific keyword (preferably 6c04bd5ca3fcae76e30b72ad730ca86d) if you want data-spy="scroll" you need to create a key Thanksgiving snowflake snowflakes If you have a data-target, you can create a bootstrap.nav database ID class.

<body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ... </body>

JavaScript

Free JavaScript Entertainment:

$('body').scrollspy({ target: '.navbar-example' })

Appropriately spontaneous spellbinding scent

Specify Easy-to-use snowflakes with snowflakes Enter the home ID, bdbe26872a334f3b7c83b8ae7c50ac47home5db79b134e9f6b82c0b36e0489ee08edcreate a DOM directory 5f3b34213db5dea3192e3beea655c52f16b28748ea4df4d9c2150843fecfba68

Refresh

.scrollspy('refresh')

If you want to refresh your scrolling, you will need to refresh your DOM页面元素时,都需要调用此法以,如下:

$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })

Special

Special data settings Free JavaScript If you have a data type, you can specify a type of data-offset, your data-offset=""

名称 类型 默认值 描述

offset	number	10	Pixels to offset from top when calculating position of scroll.

you

事件类型 描述

activate.bs.scrollspy	当滚动监听插件将某个元素置为active时，此事件被触发。

$('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… })