«

Bootstrap滚动监听插件怎么使用

时间:2024-4-8 09:11     作者:韩俊     分类: Html+Css


这篇文章主要介绍了Bootstrap滚动监听插件怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Bootstrap滚动监听插件怎么使用文章都会有所收获,下面我们一起来看看吧。

一、用法
您可以向顶部导航添加滚动监听行为:

1、通过 data 属性:向您想要监听的元素(通常是 body)添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

<body data-spy="scroll" data-target=".navbar-example">
 ...
 <div class="navbar-example">
  <ul class="nav nav-tabs">
   ...
  </ul>
 </div>
 ...
</body>

2、通过 JavaScript:您可以通过 JavaScript 调用滚动监听,选取要监听的元素,然后调用 .scrollspy() 函数:
$('body').scrollspy({ target: '.navbar-example' })
二、滚动监听
滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目, 显示导航项目高亮显示。

//基本实例
<nav id="nav" class="navbar navbar-default">
  <a href="https://www.maopiaopiao.com">

这里有两个重要的属性,如下图:


PS:在一个菜单和一个容易的时候,data-target 不设置也可以稳定实现滚动监听高亮。但多个导航时,你不关联其中一个,会导致错误,所以,一般要加上。

如果使用 JavaScript 脚本方式, 可以去掉 data-*, 使用脚本属性定义: offset、 spy和 target。具体方法如下:

//使用脚本方式定义属性

$('#content').scrollspy({
  offset : 0,
  target : '#nav',
});

滚动监听还有一个切换到新条目的事件。

//事件绑定在导航上

$('#nav').on('activate.bs.scrollspy', function() {
    alert('新条目被激活后触发此事件!');
});
滚动监听还有一个更新容器 DOM 的方法。

//HTML 部分

<section class="sec">
  <h5 id="html5">HTML5 <a href="https://www.maopiaopiao.com">

//删除内容时,刷新一下 DOM,避免导航监听错位

function removeSec(e) {
  $(e).parents('.sec').remove();
  $('#content').scrollspy('refresh');
}

注意:这个方法必须使用 data-*声明式。

标签: javascript html css

热门推荐