Bootstrap滚动监听插件

你的名字 2022-08-23 09:55 234阅读 0赞

滚动监听插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本实现是随着滚动，基于滚动条的位置向导航栏添加.active。  
1.用法  
（1）通过data属性，向您想要监听的元素添加data-spy=“scroll”  
（2）通过JavaScript，调用.scrollspy()函数

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

2.例子

<style> body { position: relative; } #html{ height:400px; background-color:#3333CC;} #css{ height:400px; background-color:gray;} #jquery{ height:400px; background-color:#3333CC;} #ajax{ height:400px; background-color:gray;} </style>
    </head>
    <body data-spy="scroll" data-target=".navbar" >
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-header"> <a class="navbar-brand" href="#">刘小妞的博客</a> </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#html">html</a></li>
          <li><a href="#css">css</a></li>
          <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> javascript <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#jquery">jquery</a></li>
              <li><a href="#ajax">ajax</a></li>
            </ul>
          </li>
        </ul>
      </div>
      
    </nav>
    <div id="html">
      <h1>html</h1>
      <p>html部分</p>
    </div>
    <div id="css">
      <h1>css</h1>
      <p> css部分</p>
    </div>
    <div id="jquery">
      <h1>jquery</h1>
      <p>jquery部分</p>
    </div>
    <div id="ajax">
      <h1>ajax</h1>
      <p>ajax部分</p>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap 插件

文章目录一、导航二、分页导航三、下拉菜单 1.用法 2.实例四、模

迷南。/ 2023年09月26日 11:49/ 0 赞/ 9 阅读

相关 4.4Bootstrap学习js插件篇之滚动监听

1、滚动监听案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。Bootstrap中文网左侧就是一个滚动监听的例子。代码段： <nav id

不念不忘少年蓝@/ 2022年08月27日 03:58/ 0 赞/ 147 阅读

相关 bootstrap滚动监听

Bootstrap ScrollSpy（滚动监听）是bootstrap插件提供的一个非常有趣的功能.当页面空间有限的时候我们可以利用它来显示我们想要显示的内容官方说的想要利

Bertha 。/ 2022年08月23日 14:42/ 0 赞/ 147 阅读

相关 Bootstrap滚动监听插件

滚动监听插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本实现是随着滚动，基于滚动条的位置向导航栏添加.active。 1.用法（1）通过da

你的名字/ 2022年08月23日 09:55/ 0 赞/ 235 阅读

相关 Bootstrap表格插件--bootstrap-table

一、简介 bootstrap-table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导

╰半橙微兮°/ 2022年06月04日 05:06/ 0 赞/ 345 阅读

相关 bootstrap 插件集

[bootstrap-growl][] [bootstrap-notify][] 这两个是简单易用的提示框插件,实现右上角弹窗 ![SouthEast][]

亦凉/ 2022年06月02日 12:13/ 0 赞/ 202 阅读

相关 bootstrap-table插件

github：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/][http_bootstrap-t

水深无声/ 2022年04月13日 12:21/ 0 赞/ 290 阅读

相关 bootstrap插件

（1）bootstrap-treeview：[https://github.com/jonmiles/bootstrap-treeview][https_github.com_

青旅半醒/ 2022年03月18日 03:24/ 0 赞/ 329 阅读

相关 Bootstrap 滚动监听(Scrollspy)

body \{ position: relative; \} </style> </head> <body data-spy="s

深藏阁楼爱情的钟/ 2021年09月15日 01:58/ 0 赞/ 286 阅读

相关响应式前端框架Bootstrap系列（17）滚动监听（Scrollspy）插件

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

灰太狼/ 2021年09月14日 14:20/ 0 赞/ 264 阅读