位置: 编程技术 - 正文

Bootstrap每天必学之滚动监听(bootstrap要学吗)

编辑:rootadmin

推荐整理分享Bootstrap每天必学之滚动监听(bootstrap要学吗),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap入门,bootstrap需要学多久,bootstrap快速入门,bootstrap要学多久,bootstrap怎么学,bootstrap快速入门,bootstrap入门,bootstrap学习,内容如对您有帮助,希望把文章链接给更多的朋友!

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下

1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

---- 使用滚动监听的话,导航栏必须采用 class="nav"的nav组件才可以:

下面是源代码中的一段,标红的部分可以证明这一点:

使用ScrollSpy的时候,需要采用<ul class="nav">标签,并且在<li>下必须有<a>标签。

注:另外我们需要把<ul class="nav">标签放到另一个容器内(如div),并给父容器添加一个id属性(这一点在第4节有介绍)

2. Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

--- 简单的说,就是<li>下的<a>标签必须有一个href="#id"属性,并且在滚动的内容里面,必须有对应的<a id="id"></a>这样的标签;当内容滚动到<a id="id">标签时,对应的<li>的<a href="#id">就会自动被选中。

--其实这一点做过Web开发的朋友都知道,在之前的HTML版本中,锚标记 通常采用<a name="tag">这样的方式,但HTML5中的锚标记已经抛弃了name属性,而是采用id属性

3. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

--- 如果监听Body的滚动,那么你必须给body添加position:relative样式

Bootstrap每天必学之滚动监听(bootstrap要学吗)

--- 如果监听的不是Body,而是其他得元素[貌似这种方式常见],那么你需要添加三个样式:position:relative;height:px;overflow-y:scroll;

4. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

--- 你需要给滚动内容的标签添加 data-spy="scroll"属性和data-target属性

data-spy 属性指明了被监听的元素,data-target属性指明滚动时需要控制的nav高亮显示

再看一次下面的初始化源代码,标红的位置,this.options.target的值,就等于滚动内容元素的data-target的值,看到这里,你或许已经想到,在定义.nav组件的时候,我们需要把.nav放在另一个容器内(比如div),且该容器需要有一个id属性(与这里data-target需要设置的值相同)。

5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:

$('yourTag').scrollspy({ target: 'nav-parent-div-id' })-- yourTag 就是要承载滚动内容的元素的ID,nav-parent-div-id 就是.nav元素的父元素的id(也就是data-target的值)

乱七八糟写了一堆,下面总结一个简单的几个步骤:

  1. 添加标签<div id="scrollSpyID">

  2. 在标签内添加.nav组件,并给li->a添加href="#tag"属性

  3. 添加<div id="content" data-spy="scroll" data-target="#scrollSpyID">;

  4. 添加样式#content{height:px;overflow-y:scroll;opsition:relative;}

  5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

最后来个小栗子:

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程Bootstrap实战教程

标签: bootstrap要学吗

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

上一篇:Javascript的表单验证长度(js表单事件有哪些)

下一篇:js实现内容显示并使用json传输数据(js如何显示日期和时间)

  • 小规模纳税人劳务费税率1%
  • 所得税年报工资薪金支出怎么填
  • 加油发票样式图
  • 未达起征点销售额,11栏怎么填写
  • 享受企业所得税三免三减半优惠的起始时间
  • 已过期增值税专票怎么开
  • 非货币性资产交换补价大于25%的会计处理
  • 持有至到期投资科目被取消了吗
  • 计提税费怎么写分录
  • 公益性捐赠会计分录金额
  • 经营利润所得税费用的计算公式
  • 购置一台设备初始费用为60000元,该设备可使用7年,答案
  • 出口退税进项税额转出是什么意思
  • 税率调整后之前签的合同用变更吗
  • 企业房屋装修费如何入账
  • 4s店改装车后卖车合法吗
  • 材料暂估价结算调整规定
  • 耕地占用税完税证明有什么用
  • 流转税税额
  • 合同违约补偿款需要缴纳增值税吗?
  • 企业交残疾人基金会计分录怎么做
  • 购买土地建厂房还要交土地使用费吗
  • 银行流水账单怎么查
  • 公司与股东的往来款现金流量表
  • 兼职人员的工资需要发票吗
  • 生产税有哪些
  • 个人所得税到年底能不能退回来
  • 债权人和债务人未经保证人同意变更
  • 其他货币资金包括哪些项目
  • 企业与企业之间进行的电子商务模式是
  • php判断ua
  • 那些收入不用缴税
  • ipad最长使用时间
  • 公司清算的补偿方案是不是应该公布了
  • 红字发票冲减的是当月收入吗
  • es6的module模块
  • vue3环境搭建
  • 不发工资可以交五险一金吗
  • 人才引进的安家费
  • 长期待摊费用科目怎么使用
  • 出差补贴要扣税吗
  • 马踏棋盘游戏规则
  • dedecms安装步骤
  • 弥补亏损的会计分录是怎样的
  • 挂预收账款怎么处理
  • 农产品增值税免税备案资料
  • 工业企业辅助生产设备
  • 无进项可以开票么
  • 期初在产品怎么算
  • 网站维护费用
  • 销售折让的账务处理方法
  • 计提税费和实际缴纳的有差额怎么办
  • 未计提坏账准备金额在哪个表
  • 河道管理费是附加税吗
  • 固定资产的维修计入什么科目
  • 收到票据又转背书付了账务处理
  • 高新技术企业的税收优惠政策
  • 开具红字发票的当月就要进项税额转出吗?
  • 收付转三种凭证的限制类型不同所以限制科目也不同
  • 大数据量高并发症有哪些
  • jdbc取数据
  • win7防火墙如何添加允许
  • Linux系统怎么调整屏幕亮度
  • centos7 lo
  • windows自带搜索引擎
  • 一篇非常好的作文
  • linux常见shell命令
  • win10右键菜单快捷键
  • js页面点击怎么随机生成图片
  • 函数里面声明函数
  • 如何用python进行数据处理
  • 7z.exe 命令行
  • javascript的promise
  • android intent作用
  • NGUI之UILocalize
  • android 改变view位置
  • 民办非企业税务登记流程
  • 国家税务总局云平台网址
  • 淄博市地方税务局
  • 军人残疾证家属享受待遇吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设