加入收藏 | 设为首页 | 会员中心 | 我要投稿 济南站长网 (https://www.0531zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 服务器 > 搭建环境 > Windows > 正文

Bootstrap滚动监听(Scrollspy)插件详解

发布时间:2016-11-24 13:31:04 所属栏目:Windows 来源:站长网
导读:滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者,正如 Boo

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

Bootstrap滚动监听(Scrollspy)插件详解

//事件绑定在导航上

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

Bootstrap滚动监听(Scrollspy)插件详解

//HTML 部分

lt;section class="sec"gt;
  lt;h4 id="html5"gt;HTML5 lt;a href="#" onclick="removeSec(this)"gt;删除此项lt;/agt;lt;/h4gt;
  lt;pgt;
    ...
  lt;/pgt;
lt;/sectiongt;

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

(编辑:济南站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!