目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

根据滚动位置自动更新引导导航或列表组组件,以指示当前视图端口中哪个链接处于活动状态。

它是如何工作的

滚动间谍有几个要求才能正常工作:

  • 如果从源头构建我们的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如果嵌套.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>

通过JavaScript

加后position: relative;在CSS中,通过JavaScript调用滚动间谍:

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

所需可解析ID目标

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授权的文档。

上一篇:下一篇: