©
本文档使用
php.cn手册 发布
根据滚动位置自动更新引导导航或列表组组件,以指示当前视图端口中哪个链接处于活动状态。
滚动间谍有几个要求才能正常工作:
如果从源头构建我们的JS,要求util.js
...
它必须用在一个引导带上NAV组分或列表组...
卷轴间谍需要position: relative;
在你监视的元素上,通常<body>
...
当监视其他元素时<body>
,一定要有一个height
设置和overflow-y: scroll;
申请。
锚定物%28<a>
%29是必需的,必须指向具有id
...
成功实现后,您的导航或列表组将相应更新,移动.active
根据它们关联的目标从一个项初始化到另一个项。
滚动导航栏下面的区域,并观察活动类的变化。下拉式项目也将突出显示。
<nav id="navbar-example2" class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#fat">@fat</a> </li> <li class="nav-item"> <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#one">one</a> <a class="dropdown-item" href="#two">two</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#three">three</a> </div> </li> </ul></nav><div data-spy="scroll" data-target="#navbar-example2" data-offset="0"> <h4 id="fat">@fat</h4> <p>...</p> <h4 id="mdo">@mdo</h4> <p>...</p> <h4 id="one">one</h4> <p>...</p> <h4 id="two">two</h4> <p>...</p> <h4 id="three">three</h4> <p>...</p></div>
涡旋间谍也适用于嵌套的.nav
如果嵌套.nav
是.active
,它的父母也会.active
滚动导航栏旁边的区域,并观察活动类的变化。
<nav id="navbar-example3" class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <nav class="nav nav-pills flex-column"> <a class="nav-link" href="#item-1">Item 1</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a> </nav> <a class="nav-link" href="#item-2">Item2</a> <a class="nav-link" href="#item-3">Item3</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a> </nav> </nav></nav><div data-spy="scroll" data-target="#navbar-example3" data-offset="0"> <h4 id="item-1">Item 1</h4> <p>...</p> <h5 id="item-1-1">Item 1-1</h5> <p>...</p> <h5 id="item-1-2">Item 2-2</h5> <p>...</p> <h4 id="item-2">Item 2</h4> <p>...</p> <h4 id="item-3">Item 3</h4> <p>...</p> <h5 id="item-3-1">Item 3-1</h5> <p>...</p> <h5 id="item-3-2">Item 3-2</h5> <p>...</p></div>
斯克鲁尔间谍也与.list-group
滚动列表组旁边的区域,并观察活动类的更改。
<div id="list-example" class="list-group"> <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a> <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a> <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a> <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a></div><div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example"> <h4 id="list-item-1">Item 1</h4> <p>...</p> <h4 id="list-item-2">Item 2</h4> <p>...</p> <h4 id="list-item-3">Item 3</h4> <p>...</p> <h4 id="list-item-4">Item 4</h4> <p>...</p></div>
若要轻松地将滚动间谍行为添加到顶部导航中,请添加data-spy="scroll"
对于要监视%28的元素,最典型的情况是<body>
29%。然后添加data-target
属性,该属性具有任何Bootstrap的父元素的ID或类。.nav
组件。
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>
加后position: relative;
在CSS中,通过JavaScript调用滚动间谍:
$('body').scrollspy({ target: '#navbar-example' })
Navbar链接必须有可分辨的id目标。例如,<a href="#home">home</a>
必须对应于DOM中的某些内容,如<div id="home"></div>
...
:visible
忽略目标元素不是的目标元素:visible
根据jQuery将被忽略,其相应的导航项将永远不会突出显示。
.scrollspy('refresh')
当结合使用滚动间谍从DOM中添加或删除元素时,您需要调用以下刷新方法:
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')})
.scrollspy('dispose')
破坏元素的滚动间谍。
选项可以通过数据属性或JavaScript传递。对于数据属性,将选项名追加到data-
,如data-offset=""
...
Name | Type | Default | Description |
---|---|---|---|
offset | number | 10 | Pixels to offset from top when calculating position of scroll. |
Event Type | Description |
---|---|
activate.bs.scrollspy | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () { // do something…})
© 2011–2017 Twitter, Inc.
©2011-2017自带作者
根据麻省理工学院的许可授权的代码。
根据CreativeCommonsAttributionLicense v3.0授权的文档。