首页 > 经验 > 关键词 > 滚动监听最新资讯 > 正文

Bootstrap3.0学习教程十九:JavaScript插件滚动监听

2015-04-10 09:50 · 稿源:aehyok博客园

完整教程可查看:Bootstrap3.0教程

本文主要来学习一下JavaScript插件--滚动监听

滚动监听

案例

滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面,看看左侧导航的变化。

先把实现的代码上了,你可以通过测试代码先来看看效果。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">
</script>
<![endif]-->
<style type="text/css"> .scrollspy-example
{
height: 200px;
overflow: auto;
position: relative;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container" >
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li class="active"><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li><a href="#one" tabindex="-1">one</a></li>
<li><a href="#two" tabindex="-1">two</a></li>
<li class="divider"></li>
<li><a href="#three" tabindex="-1">three</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-offset="0" class="scrollspy-example" data-spy="scroll" data-target="#navbar-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold
out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie
minim qui you probably haven
't heard of them et cardigan trust fund culpa biodiesel wes anderson
aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.
Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles.
Tattooed cosby sweater food truck, mcsweeney
's quis non freegan vinyl. Lo-fi wes anderson +1
sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar
deserunt.</p> <h4 id="one">one</h4> <p>Occaecat commodo aliqua delectus.
Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next
level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis
aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag.
Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
<h4 id="two">two</h4>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats
sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin
coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably
haven
't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt
sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four
loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
<h4 id="three">three</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold
out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan
mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
hoodie minim qui you probably haven
't heard of them et cardigan trust fund culpa biodiesel wes
anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente
synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard
of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out,
terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan.
Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit
minim commodo ullamco thundercats.
</p>
</div>
</div>
<script src="js/jquery-2.0.3.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</html>

View Code

然后运行后,在内容下,也就是有滚动条哪里滚动鼠标齿轮,即可看到效果。

用法1--通过data属性

通过为需要监听的页面元素(一般是)不过在上面添加在了Div上面,你可以自己看看代码就明白了。然后给div添加属性data-spy="scroll"就可很轻松的为顶部导航条添加滚动监听功能。然后为其添加data-target属性,此属性的值为任何Bootstrap中.nav组件的父元素的ID或class。

<div data-offset="0" class="scrollspy-example" data-spy="scroll" data-target="#navbar-example">
........

</div>

导航链接地址必须有对应的目标

导航条内的链接地址必须有对应的页面元素具有同样的ID值。例如,home必须对应DOM中例如

用法2--通过JavaScript

通过JavaScript启动滚动监听:

    <script type="text/javascript"> $(function () {
$(
'.scrollspy-example').scrollspy({ target:'#navbar-example' });
})
</script>

通过将样式类为scrollspy-example的div,去掉它的data-target属性。这样同样可以进行鼠标滚轮的切换。

方法

.scrollspy('refresh')

使用滚动监听插件时,每当页面中从DOM中增加或删除页面元素时,都需要调用此方法以,如下:

$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })

不过暂时还没用到。

选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-offset=""。

事件

 <script type="text/javascript"> $('#navbar-example').on('activate.bs.scrollspy', function () {
alert(
1);
})
</script>

 最后注意:针对滚动监听的内容当然要添加滚动条,也就是要预先添加样式

 

     <style type="text/css"> .scrollspy-example
{
height: 200px;
overflow: auto;
position: relative;
border:1px solid red;
}
</style>

给与Div内容一定的高度。

总结

纠结了很久,就是因为针对内容那里没有滚动条。这一点一定记住勒。

  • 相关推荐
  • 大家在看
  • 联发科独立AI处理器APU3.0,手机AI应用的原动力

    近年来,手机在语音助手、AI拍照、视频优化、VR/AR游戏等方面的AI应用快速发展,手机想要实现这些AI应用,需要芯片提供足够强大的AI算力和低功耗效能,因此手机芯片厂商纷纷在SoC中加入了独立的人工智能处理器,用于专门进行AI运算。例如联发科的天玑系列5G芯片,无论是主打高端市场的天玑 1000 系列,还是主打中高端市场的天玑 800 系列,都搭载了联发科自研的独立AI处理器 APU 3.0。早在 2018 年,联发科就开始将独立AI处理器内?

  • StrategyAnalytics:超宽带芯片正在迈向成功

    Strategy Analytics最新发布的研究报告《UWB的回归:智能手机、汽车、工业等芯片预测》指出,2019年UWB(超宽带)系统和无线电芯片市场实现了飞跃;于此同时,新标准、芯片和应用意味着UWB的复兴。相关资料显示,UWB 技术是一种传输速率高,发射功率较低,穿透能力较强并且是基于极窄脉冲的无线技术。 StrategyAnalytics指出,苹果iPhone11机型采用了全新的U1超宽带无线电芯片以及用于远程无钥匙进入的新汽车标准推动?

  • 更轻盈,更安全,宏碁TravelMate X5高效办公

    在市面上众多类型的笔记本中,轻薄本其轻薄的特征受到职场人士的青睐,对于现代企业办公方式与工作场景多样化的情形下,易于携带的轻薄本则成为都市白领们的必备武器。突破新极限,宏碁TravelMate X5 轻薄本拥有超越想象的轻薄,整机仅重0.98kg,薄至14.9mm,轻松收纳,更拥有强劲的性能与安全的工作环境为高效办公护航。 轻薄体验,搭载酷睿处理器性能非凡 TravelMate X5 不仅仅只是轻薄,整机重量控制在0.98kg的同时,更搭载了?

  • 直播3.0时代:综艺+带货+内容如何“赢过”买买买

    用户对不同品类商品的关注点不同,带货方式也有所不同。比如罗永浩带货网红食品钟薛高跟薇娅带货卫星,梁建章带货酒店与董明珠带货家电,都会有所不同。随着直播赛道越来越拥挤,各个细分品类的直播开始呈现出不同的行业规律。

  • 鲸小喜3.0:实体店如何用会员制提高业绩?

    最近几年,会员制的发展速度可以用惊人来形容,很多大公司,都开始疯狂推会员制。2015 年,京东推出PLUS会员; 2016 年,唯品会推出超级VIP会员; 2017 年,网易考拉推出黑卡会员、苏宁易购推出SUPER会员; 2018 年,阿里推出 88 超级会员。 以上是一些互联网公司,我们再来看一看线下实体商家。 2015 年物美推出会员制超市尚佳会员店、永辉也在上海开出超市会员店; 2017 年,银泰推出付费会员365; 2019 年,中国首家Costco开市客落址

  • 三星Galaxy Note 20 Ultra爆料:一亿像素主摄敲定

    6月26日消息,知名爆料人士Roland Quandt推特表示,已经有确凿证据表明三星Galaxy Note 20 Ultra的主摄为108MP。除了一亿像素主摄之外,Galaxy Note 20 Ultra还有可能会使用潜望式长焦镜头及超

  • 三星Galaxy S20 Ultra从15楼摔下:屏幕基本完好

    6月13日消息,有网友表示,自己的Galaxy S20 Ultra从15楼摔到3楼,背板摔坏了,但是屏幕基本完好,仅有一个坏点。据悉,Galaxy S20 Ultra是三星2月份推出的年度旗舰,首发起售价9999元,它采用

  • 鲸小喜3.0:实体店开始复苏了,来研究一下新会员联盟--鲸鲤店

    2020 年的实体店市场可谓是如履薄冰,全国在今年倒闭的零售店不计其数。但我觉得实体店会慢慢复苏,因为电商的发展也遇到了瓶颈。近几年电商红利逐渐消失,营业费用也在不断提高,商家抱怨平台收费太高,电商法出台对网购雪上加霜,导致大批平台经营者纷纷退出投身实体店。然而如何克服传统实体店弊端,依旧是众多实体店主必须面临的思考。很多实体店商家面临着拓客,锁客,留客三大问题。在做活动的过程中,无法长期锁定客户,而?

  • 鲸小喜3.0:零售业会员制到底该怎么玩?

    会员制是帮助企业建立忠诚顾客群体的重要工具。据统计,如果一家企业至少有70%的顾客消费是由会员或回头客带来的,那么其营销活动的投入会降低很多。但绝大部分零售商并没有真正树立“既卖商品,又提供服务”的用户意识,他们仅仅是想把商品卖出去,从顾客口袋里拿到更多的钱。这样的思路下,零售业的会员制是很难做好的。通过数月的调研,我们总结出本土化会员制存在的三大问题。1. 大众普遍不适应商场会员准入制从国外引入的会员

  • Dafex 达菲创新小宇宙 AIT 3.0 引领金融科技

    随着大时代的改变与发展迁移,人工智能、大数据、云计算等新一代信息技术的发展已经成为了改变传统一尘不变的模式。DAFEX 达菲是一家全球性的专业金融技术服务提供商,用心致力于创新科技为一直保守着传统方式的金融业带来新景象。一个汇集顶尖人工智能技术及金融交易的专业平台 – 小菲达人(AIT 3.0)正是DAFEX 达菲的核心所在。小菲达人(AIT 3.0)不仅汇聚了业内专家和各大技术支持,更以区块链技术为研发领航者创建了许多人工

  • 腾讯智慧出行发布多款重磅新品 涉及车联网产品TAI 3.0等

    【TechWeb】6月24日消息,腾讯智慧出行今日发布多款新品,包括生态车联网产品TAI 3.0、全新一代自动驾驶虚拟仿真平台TAD Sim 2.0,以及汽车云数字营销解决方案、智慧交通解决方案。生态车联网产品TAI 3.0作为生态车联网战略的核心承载之一,TAI3.0在年初CES上首发亮相,此次全新发布的TAI3.0已经进化具备四大核心服务能力,即“认识和理解用户、与用户的连接和沟通、为用户连接广泛的服务生态、贯穿全生命周期的云端处理”能力。?

  • 学习通崩了?6月17日学习通app疑似无法打开

    6月17日,在今天有不少网友表示学习通App出现无法开打,页面刷新不出来等多种问题,疑似该app崩了。而在今年3月份学习通也曾发生过app故障,当时官方表示因为上千万用户同时使用,造成瞬间流量过载,导致部分功能不流畅,学习通通过“起飞”模式,使用户分批次登陆,最大限度保障用户的使用。

  • 人人App疑遭全网下架 人人App为什么被下架

    近日苹果AppStore应用商店上已经无法搜索到人人APP,疑似已经被下架,而在多个安卓应用渠道同样也无法搜索和下载,提示为“该应用内部优化中,暂不提供下载”。那么人人APP为什么被下架,官方对此如何回应呢。

  • 腾讯游戏扩大人脸识别范围,未成年人保护进入3.0阶段

    6月17日,腾讯游戏宣布自 6 月 17 日起腾讯游戏正式升级未成年人保护措施,扩大人脸识别技术应用范围,对疑似未成年人的用户进行甄别。这也意味着腾讯游戏对未成年人保护工作升级到了全新的3. 0 阶段。

  • 超大杯!三星Galaxy Note 20 Ultra保护壳曝光:相机模块大的惊人

    6月21日,据外媒报道,网上已经流传出了关于三星Galaxy Note 20和Note 20 Plus/Ultra的手机保护套,从照片可以看出来,相机似乎得到了升级,因为相机模块十分大。从图片可以这几款机型的差别,

  • 坚果Pro 2S/R1 Smartisan OS一步3.0功能跳票:官方致歉

    6月24日消息,Smartisan OS官方微博发布“关于R1和Pro 2S机型一步3.0功能延期的情况说明”。官方表示,原计划坚果R1、Pro 2S在2020年年初完成Smartisan OS 7.0升级,包括网友非常期

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

    2G 3G 4G
  • 有味APP

    有味APP,前身为腾讯新闻极速版,产品定位是“美好生活分享平台”。产品分为首页、圈子、关注和小窝(即个人主页)四大部分,用户可在产品内发布图文内容或视频内容。

  • AppClips是什么功能 AppClips怎么使用

    苹果iOS14系统中加入了一个全新的AppClips功能,这个功能是可以让用户不下载全部应用的情况下就可以使用该应用的功能,那么AppClips是怎么使用,这里我们来了解下AppClips功能的介绍。

  • 东方福利网全新上线百福得3.0企业员工福利管理系统

    5月28日,这场在特殊时期承载着不同以往的期待,受到各方高度关注的十三届全国人大三次会议正式闭幕。在两会的诸多声音中,“新基建”和“打造数字经济新优势”一度成为社会热词。新冠疫情的爆发使得传统经济被迫按下暂停键,新基建的提出则进一步加快了企业数字化转型升级的步伐。各行各业将趁此东风,通过数字技术赋能企业商业模式、管理运营。随之而来的,是协同办公、数字营销等新兴需求的爆发和SaaS应用需求激增的趋势。近日?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天