位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享Bootstrap滚动监听(Scrollspy)插件详解(bootstrap滚动监听效果),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js监听滚动scrolltop,js监听滚动scrolltop,js 监听滚动条,bootstrap滚动监听原理,js滚动监听,bootstrap 滚动监听,bootstrap滚动监听原理,bootstrap滚动监听原理,内容如对您有帮助,希望把文章链接给更多的朋友!

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

如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

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

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

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

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

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

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

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

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

//事件绑定在导航上

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

//HTML 部分

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

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

标签: bootstrap滚动监听效果

本文链接地址:https://www.jiuchutong.com/biancheng/373354.html 转载请保留说明!

上一篇:JS组件Bootstrap实现下拉菜单效果代码(bootstrap的组件)

下一篇:跨域资源共享 CORS 详解(跨域资源共享漏洞怎么修复)

  • 退回企业所得税的账务处理
  • 报表中的存货是如何填报的
  • 两个日期连在一起怎么写
  • 银行存款支付运费会计科目
  • 增值税发票认证平台
  • 核定征收需要什么条件和手续
  • 每月长摊金额如何分摊
  • 个体户每个月开10万会查吗
  • 生产设备的修理费用计入什么科目小企业
  • 年度财务报表和季度财务报表一样吗
  • 事业单位固定资产
  • 补计提个税的会计分录
  • 员工因为过错给公司造成损失
  • 接受投资者的无形资产
  • 年底结账会计处理
  • 递延纳税筹划策略研究
  • 以前年度损益是所有者权益吗
  • 加工费发票怎么做账务处理
  • 普通增值税发票查询结果不一致是什么原因?
  • 银行摘要冲账是什么意思
  • 什么叫变动费用
  • 存货盘亏应该计什么科目
  • 用友软件怎么反记账凭证
  • 交易性金融资产入账价值怎么计算
  • linux网络管理实训总结
  • 2019年税改前后税率对比
  • php中this的用法
  • windows太阳谷更新
  • 企业所得税分析方法
  • 所有者权益变动表范本
  • 理财计算收益公式
  • 笔记本保养技巧和方法
  • 股权转让会记分录
  • Chateau de Castelnaud in Perigord, France (© Peter Adams/Offset by Shutterstock)
  • php如何制作登录页面
  • 房屋装修固定资产置换
  • 企业法人歇业后诉讼主体确认
  • 农产品加计扣除1%怎么计算和会计分录
  • 汇算清缴补交所得税怎么做凭证
  • 投资性房地产按公允价值计量
  • 培训费开票属于哪个征收明目
  • 公司注销剩余的发票怎么作废
  • 基本户往一般户转钱有限制吗
  • 过路费一定是要公司的车辆吗
  • 小微企业需要专职安全员吗
  • 河南巩义黄河治理项目土方工程有哪些
  • 固定资产折旧准备属于什么科目
  • 新公司成立后税务方面有哪些流程2023
  • mysql数据库排序
  • 租金收入会计科目
  • 现金核算如何进行账务处理
  • 以股权入资该怎么办
  • 固定资产处置当月需要计提折旧吗
  • 电子商务交易类应用发展现状
  • 国外佣金算什么费用比较好
  • 计提社保个人部分会计分录
  • 年末净利润为负说明什么
  • 营改增后工程项目计价规则也随之发生了改变对错
  • winxp系统开机启动项
  • linux的sh
  • mac版cad2022使用教程
  • macos finder的应用程序列表在哪里
  • linux 添加swap
  • ubuntu设置在哪里
  • linux 桌面系统
  • windows无法访问指定设备路径权限
  • linux怎么启动进程
  • bsd模式是什么意思
  • win10资源管理器在哪里打开
  • win7禁用全屏优化在哪
  • win7怎么禁止网络连接
  • ExtJS4 组件化编程,动态加载,面向对象,Direct
  • js函数详解
  • python ftp文件上传
  • python 文件操作,读,写,指定位置
  • js选中文字
  • android存储方式
  • 企业自产自销农产品免税政策有哪些
  • 计提税金的公式
  • 税务人的形象
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设