滚动侦测scrollspy

最新推荐文章于 2021-03-02 14:40:19 发布
转载 最新推荐文章于 2021-03-02 14:40:19 发布 · 130 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhouyx/p/4759607.html
文章标签：

#javascript #ui #ViewUI

本文介绍了一个使用AmazeUI框架实现滚动监听效果的例子。通过JavaScript为不同元素设置滚动监听，当元素进入可视区域时触发相应的动画效果。示例中展示了两种不同的动画方式：slide-left 和 fade。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>

转载于:https://www.cnblogs.com/zhouyx/p/4759607.html

cordova移动端的导航栏滚动侦听
Bella的博客
01-30 732
滚动侦听的插件有很多，比如：    bootstrap提供的滚动监听点击打开链接，    amazeui提供的滚动侦测导航点击打开链接由于插件应用到项目中会出现问题，利用jQuery实现了简单功能，运用了国内流行的amazeui前端框架css库。效果：代码如下，复制粘贴可以直接在APP内运行：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head...
scrollspy（滚动监听）的使用方法
简约靳
04-19 8938
源码文件：Scrollspy.js实现功能1、当滚动区域内设置的hashkey距离顶点到有效位置时，就关联设置其导航上的指定项2、使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以。导航必须是 .nav &gt; li &gt; a 结构，并且a上href或data-target要绑定hashkey3、在定义.nav组件的时候，我们需要把.nav放在另一个容器内(比如div...
AmazeUI 流动侦测导航
08-12
NULL 博文链接：https://onestopweb.iteye.com/blog/2277589
AmazeUI 流动侦测
一直专注于互联网
02-23 231
&lt;!doctype html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=
对导航栏的滚动侦测实现导航栏随也没内容下滑后固定
weixin_44735933的博客
03-02 582
我们常常看到一些网站的内容下滑时 , 导航栏就固定在顶部 , 这样的功能是怎样实现的呢? 我这里是vue的实现 在vue的钩子函数中将下面的代码粘贴进去 , 然后我们在自己导航栏的那个标签上加上一个id = "inner"的属性 mounted() { //导航栏随页面滚动检测 // 在页面中的nav标签加上id="inner"这洋一个属性 let obj11 = document.getElementById("inner"); let top11 = ge
使用Bootstrap 3创建响应式滚动侦测：触发动画与效果
# 章节一：介绍Bootstrap 3和响应式设计 ## 1.1 了解Bootstrap 3的基本概念和特点 Bootstrap 3是一个流行的开源前端框架，由Twitter开发并维护。...Bootstrap 3的特点包括： - 响应式布局：自动适应不同屏幕尺寸，...
Boostrap基础教程之JavaScript插件篇
12-28
滚动侦测 Scrollspy 选项卡 Tab 提示框 Tooltip 弹出框 Popover 警告框 Alert 按钮 Button 折叠 Collapse 旋转轮播 Carousel 自动定位浮标 Affix 模态弹窗 <div class=modal-header>
Bootstrap 4设计：免费罗纳尔多单页个人网站模板
此外，Bootstrap 4 还包括一套丰富的JavaScript插件，这些插件可以用来增强网站的功能，例如模态框（modals）、下拉菜单（dropdowns）、滚动侦测（scrollspy）等。这些功能可以帮助开发者在不编写大量脚本的情况下，...
Bootstrap JavaScript插件全解析
4. **滚动侦测 (Scrollspy)** Scrollspy根据页面滚动位置自动高亮导航菜单项，与`<body data-spy="scroll">`和`<li class="active">`配合工作。 5. **选项卡 (Tab)** 选项卡组件允许在不同内容间切换，`...
vue+element ui实现页面平滑滚动，滚动监听（导航栏根据内容块滑动改变状态）
GUANYX的博客
10-18 8593
一、效果图 二、点击导航栏页面平滑滚动 1.首先在子页面设置锚点
【AmazeUI】各种的导航式菜单与解决方法
热门推荐
编程记录，亲测有效
05-12 1万+
与Bootstrap一样，AmazeUI提供的导航式菜单也是喜欢蜷缩在右上角的一个按钮里面，然后一点击就向下拉开一大段距离。这样很不友好。此前《【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas》（点击打开链接）是一种解决方案，但是对于一些不使用页面的页面，这种方案则无能无力。 对于此有如下的几种方案可以解决： 一、改造AmazeUI提供的手机端文字横排
amazeui学习笔记一（开始使用2）--布局示例layouts
weixin_33829657的博客
05-07 350
amazeui学习笔记一（开始使用2）--布局示例layouts  一、总结 1、样例分析（不要忘记，优先分析这个布局示例）：有教你页面怎么布局的，实例中可以分析一波 2、响应式：对应meta标签中的viewpoint属性： 3、禁用响应式方法：（就是amaze ui应该是默认响应式的） a、删除 head 里的视口设置 meta 标签； b、固定容器 .am-container ...
amaze UI 笔记 - JS
weixin_30423977的博客
12-11 172
导航添加依据http://amazeui.org/javascript 下面内容属学习笔记，如有理解偏差和错误请留言相告，感谢！* =（官网这块写的很详细） 一 、UI增强 　　1.警告框 显示可关闭的页内警告信息。在 Alert 最外层元素上添加 data-am-alert。 　　2.按钮交互 * 　　　a.按钮Loading状态 　　 b.单按钮状态切换 　　 c....
导航栏联动（滚动监听）
BOZAIer的博客
11-29 1051
&lt;!doctype html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximu
amazeui/bootstrap框架及前端相关的知识概要!
guiying1的专栏
07-26 1579
框架     amazeui     bootstrap 插件     iscroll     jquery.lazyload.min     jquery.marquee.min     日历插件     jquery.pin.min     placeholder     slide 常用     1、浮动 am-cf(清除浮动)、am-fl(左浮动)、am-fr(右浮
目前比较流行的网站设计风格有哪些
jeff技术博客
01-14 9035
目前比较流行的网站设计风格有哪些  技术的革新带动了设计行业的的迅猛发展，这使得设计师和开发者有了更广阔的的探索天地。而网站设计也越发不再那么循规蹈矩，许多团队和公司都做了很多思考和创意。所以在我们适应着现代设计潮流的同时，不妨也来看看现阶段网页设计大致的趋势和风格吧。我不敢大言不惭的说这就是当下网页设计的趋势，这只是本人对当下网页设计做出的一些小总结。希望这样的归类总结能给你带来更多的
响应式前端框架Bootstrap系列（17）滚动监听（Scrollspy）插件
@黄小泽的个人博客
01-15 3643
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。 Scrollspy的样式有以下几种： data-spy="scroll",放在想要监听的元素，一般为或 data-target=".navbar",滚动导航栏，一般为 data-offset,当计算滚动
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值