8.4.2 使用JS实现滚动监听
除了可以使用data-spy
和data-target
两个属性实现滚动监听之外,Bootstrap
也支持使用JS实现滚动监听。
如何使用JS实现滚动监听
使用JS实现滚动监听只要调用scrollspy()
方法即可,该方法有两种调用方法。
- 传入一个形如
{target:#'fknavbar'}
的对象参数,其中,target
属性值指定滚动监听对应的导航条组件。
- 传入一个
'refresh'
字符串参数,其中,target
属性值指定滚动监听对应的导航条组件。
如果被滚动监听的HTML
元素存在增加、删除子元素的操作,则需要按如下方式调用scrollspy()
方法。
1 2 3
| $('[data-spy="scroll"]').each(function (){ var $spy=$(this).scrollspy('refresh'); })
|
下面代码示范了如何使用JS实现滚动监听。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 滚动监听 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </head>
<body style="padding-top:50px"> <div class="container"> <nav id="fknavbar" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid">
<div class="navbar-header"> <a class="navbar-brand" href="#">滚动监听</a> </div> <ul class="nav navbar-nav"> <li class=""><a href="#java">疯狂Java讲义</a></li> <li class=""><a href="#android">疯狂Android讲义</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端图书 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li class="active"><a href="#html">疯狂HTML 5讲义</a></li> <li role="separator" class="divider"></li> <li><a href="#front">疯狂前端开发讲义</a></li> </ul> </li> </ul> </div> </nav> </div> <h3 id="java">疯狂Java讲义</h3> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <h3 id="android">疯狂Android讲义</h3> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <h3 id="html">疯狂HTML 5讲义</h3> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <h3 id="front">疯狂前端开发讲义</h3> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <script type="text/javascript"> $(document.body).scrollspy({ target: '#fknavbar', offset: 180 });
</script> </body>
</html>
|
该代码直接对页面的<body>
元素进行滚动监听,但在页面中并未对<body>
元素指定data-spy
和data-target
两个属性,而是通过JS代码调用scrollspy()
方法来实现对<body>
元素的滚动监听。
为了保证页面滚动时滚动条不会消失,本例将滚动条设置为.navbar-fixed-top
风格,这意味着该滚动条始终固定在页面上方。由于滚动条固定在页面上方会遮挡页面的部分内容,因此还为<body>
元素设置了padding-top:50px
。
滚动监听事件
Bootstrap
为滚动监听也提供了一个事件:activate.bs.scrollspy
,每当一个新的导航链接被激活时,该事件对应的监听函数都会被激发。例如可以使用如下代码来监听该事件:
1 2 3
| $('#fknavbar').on('activate.bs.scrollspy', function () { });
|
原文链接: 8.4.2 使用JS实现滚动监听