滚动侦测scrollspy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Amaze UI Examples</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!-- <link rel="stylesheet" href="assets/css/app.css">-->
</head>
<body>
<div style="height: 800px;"></div>
<div class="am-panel am-panel-primary" id="my-scrollspy">
<div class="am-panel-hd">ScrollSpy via JS
</div>
<div class="am-panel-bd">
生命是一团欲望，欲望不满足便痛苦，满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
</div>
</div>
<div class="am-panel am-panel-primary" id="my-scrollspy2">
<div class="am-panel-hd">ScrollSpy via JS
</div>
<div class="am-panel-bd">
生命是一团欲望，欲望不满足便痛苦，满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
</div>
</div>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script>
$(function() {
//eg
$('#my-scrollspy').scrollspy({
animation: 'slide-left',
delay: 500
})
$('#my-scrollspy2').scrollspy({
animation: 'fade',
delay: 1000
})
});
</script>
</body>
</html>
滚动侦测scrollspy的更多相关文章
- react搭配amazeui环境搭建
1.安装node https://nodejs.org/en/download/ 查看node npm版本 2.安装react 创建新的react单页面应用 npm install -g cre ...
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
- amazeui中的js插件有哪些（详解功能）
amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...
- bootstrap3-javascript插件- 慕课笔记
bootstrap支持的js插件 说明:文中内容系本人在某网站学习笔记,本着本站禁止推广的原则,在此就不著明学习站点的名称及地址.其实开博客的目的也就是为了方便记录学习,因为平时本地的记录太多丢三落四 ...
- Bootstrap滚动监控器
前面的话 滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的.滚动导航条下面的区域并关注导航项的变化,下拉菜单中的条目也会自动高亮显示.本文将详细介绍Bootstrap滚动监控器 基本用法 滚动 ...
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- Bootstrap JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...
- Bootstrap-17
导入JavaScript插件: 一次性导入:Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js <!—导入jQue ...
- [Bootstrap]7天深入Bootstrap(5)JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...
随机推荐
- jquery-根据现有结果集得到另一个结果集（后代、祖先或兄弟元素）
1.获取后代元素 1)children() 不传参数:得到结果集内所有元素的子元素 传入选择器:得到结果集内元素的匹配传入选择器的子元素 2)find() 传入选择器:得到匹配选择器的后代元素 传入j ...
- arugsJS 入门
一款优秀的前端框架——AngularJS 前 言 AngularJS是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架.AngularJS有着诸多特性,最为核心的是:MVC. ...
- Tomcat源码学习
Tomcat源码学习(一) 转自:http://carllgc.blog.ccidnet.com/blog-htm-do-showone-uid-4092-type-blog-itemid-26309 ...
- jquery的委托处理
1.基本用法: javascript的事件模型,采用”冒泡”模式,也就是说,子元素的事件会逐级向上”冒泡”,成为父元素的事件. 利用这一点,可以大大简化事件的绑定.比如,有一个表格(table元素) ...
- oracle 中 cursor 与refcursor及sys_refcursor的区别 (转载)
http://blog.csdn.net/gyflyx/article/details/6889028 引用一.显式cursor 显式是相对与隐式cursor而言的,就是有一个明确的声明的cursor ...
- zoj 1022 - Parallel Expectations
题目:有两个指令序列,在执行时,能够执行随意指令序列的下一条指令.每条指令要一直执行到结束. 求两组指令执行结束后,每一个变量里面存储值的期望. 分析:dp,模拟.这道题算不上难题,只是算得上的麻烦题 ...
- /etc/sysctl.conf
/etc/sysctl.conf 用于控制内核相关的配置参数,而且它的内容全部是对应于 /proc/sys/ 这个目录的子目录及文件 [root@localhost ~]$ ll /proc/sys ...
- Android 监听按钮的点击事件
onClick事件1.Button和ImageButton都拥有一个onClick事件 通过自身的.setOnClickListener(OnClickListener)方法添加点击事件2.所有的控件 ...
- thinkphp5 Windows下用Composer引入官方GitHub扩展包
很多新手,比如说我,写代码就是在windows下,所以总会遇到很多不方便的地方,比如说GitHub上面的代码更新了,要是你在linux,只要几行命令就可以搞定更新了,在windows下面,你需要用到C ...
- DAG 的最短路径算法
求图中节点的单源最短路径可以使用Dijkstra,BellmanFord, SPFA算法,而对于有向无环图DAG来说,可以通过简单的动态规划来进行求解. DAG的独特之处是所有节点可以线性化( ...