草庐IT

Bootstrap5 滚动监听(Scrollspy)

runoob 2023-04-06 原文

Bootstrap5 滚动监听(Scrollspy)

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

如何创建滚动监听

以下实例演示了如何创建滚动监听：

实例

<!-- 可滚动区域 --> <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"> <!-- 导航栏 - <a> 元素用于跳到指定滚动区域 --> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... <ul class="navbar-nav"> <li><a href="#section1">Section 1</a></li> ... </nav> <!-- Section 1 --> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ... </body>

尝试一下 »

实例解析

向您想要监听的元素（通常是 body）添加 data-bs-spy="scroll" 。

然后添加 data-bs-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id （<div id="section1">） 必须匹配导航栏上的链接选项 （<a href="#section1">)。

可选项data-bs-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。

以下实例设置了垂直滚动监听：

实例

<div class="row"> <div class="col-4"> <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3"> <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 ms-3 my-1" href="#item-1-1">Item 1-1</a> <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a> </nav> <a class="nav-link" href="#item-2">Item 2</a> <a class="nav-link active" href="#item-3">Item 3</a> <nav class="nav nav-pills flex-column"> <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a> <a class="nav-link ms-3 my-1 active" href="#item-3-2">Item 3-2</a> </nav> </nav> </nav> </div> <div class="col-8"> <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="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 1-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> </div> </div>

尝试一下 »

列表组形式：

实例

<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">Item 2</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-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <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>

尝试一下 »
Bootstrap5Bootstrapspanclasshl

有关Bootstrap5 滚动监听(Scrollspy)的更多相关文章

  1. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  2. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  3. ruby-on-rails - Rails 是否支持监听 UDP 套接字的简洁方式？ - 2

    在Rails中，什么是集成更新模型某些元素的UDP监听过程的最佳方式(特别是它将向其中一个表添加行)。简单的答案似乎是在同一个进程中使用UDP套接字对象启动一个线程，但我什至不清楚我应该在哪里做适合Rails方式的事情。有没有一种巧妙的方法来开始收听UDP？具体来说，我希望能够编写一个UDPController并在每个数据报消息上调用一个特定的方法。理想情况下，我希望避免在UDP上使用HTTP(因为它会浪费一些在这种情况下非常宝贵的空间)，但我完全控制消息格式，因此我可以为Rails提供它需要的任何信息。 最佳答案 Rails是一个

  4. ruby-on-rails - 在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic) - 2

    我如何像这样从Bootstrap中集成typeahead:变成这样的标准形式: 最佳答案 在你的Controller中defindex@autocomplete_items=Model.allend在您看来，就像您为选择器添加了一个额外的ID...最重要的是，将Controller中定义的@autocomplete_items实例变量传递给View中的Javascript变量:这将序列化您的数据并使其成为可用于Typeahead函数的JSON。至于Typeahead，只需将该对象(@autocomplete_items)作为JSON

  5. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  6. css - 在 rails 中使用 Bootstrap Sass 时出错 - 2

    我正在开发一个简单的ruby​​onrails应用程序，但出现以下错误:TypeError:无法读取未定义的属性“进程”(在/home/saasbook/Documents/projects/Bookkeeper/app/assets/stylesheets/application.css.sass)提取的源码如下:Bookkeepertrue%>//Highlightederrorlineinextracttrue%>此错误发生在我使用BootstrapSass插件添加BootstrapSass并遵循此tutorial之后摘录下方指出错误位于:app/views/layouts/ap

  7. ruby-on-rails - Rails/Bootstrap - Flash 通知 :success is now red and not green? - 2

    我一直试图在这里寻找答案，但我找不到任何有用的东西。我已经对我的Rails应用程序实现了:success和:dangerflash通知。它工作得很好，即:success是绿色的，:danger是红色的，有一个关闭按钮等等，但是自从添加了一些邮件文件后，我的:success现在显示为红色？application.html.erb摘录:×contact_mailer.rbclassContactMailercontacts_controller.rbclassContactsController还有，contact_email.html.erbNewMessagefromHoo

  8. ruby - 使用指南针安装 bootstrap sass - 2

    我正在尝试安装bootstrap-sass并收到以下错误。我试过旧版本的sass，但bundler一直在安装3.3.0。WARN:UnresolvedspecsduringGem::Specification.reset:sass(~>3.2)WARN:Clearingoutunresolvedspecs.Pleasereportabugifthiscausesproblems./Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.r

  9. ruby-on-rails - Bootstrap 的 ruby gem 有什么区别？ - 2

    gem有什么区别:bootstrap-sass(下载量8,309,861)bootstrap-sass-rails(下载量236,886)twitter_bootstrap_sass(下载量6,011)在Rails应用程序中使用哪个gem更好？ 最佳答案 twitter_bootstrap_sass是社区提供的第一个bootstrapgem。它已被弃用，不再使用。bootstrap-sass-rails是官方的Bootstrapgem。它由社区提供并得到推特的认可，直到它在2014年被弃用并被下面的bootstrap-sass取代b

  10. ruby - 如何在 Rails 之外使用 less.rb 处理 Bootstrap - 2

    我正在尝试使用less.rb创建一个独立的应用程序(独立于RailsAssets管道)以基于TwitterBootstrap输出CSS文件。下面的结果是一个空文档parser=Less::Parser.new:paths=>[Rails.root+'/public/bootstraps/twitter-bootstrap-857b8fb/less']tree=parser.parse("@import'bootstrap.less'")tree.to_css这会导致返回一个空字符串。我尝试了将@import更改为完整路径等的变体，但没有成功。我想我一定遗漏了一些简单的东西。

随机推荐