jquery 滚动条 scroll 和 animate出现的问题总结
这两天刚刚学习了jquery就想把平时做看到的一些相关效果用新的知识写写看。知识平时看着都懂，实际操作中问题才会层出不穷。
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
.result{
width: 100%;
height: 50px;
background: #ccc;
position: fixed;
top: -50px;
}
</style>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.slim.min.js"></script>
</head>
<body style="height:4500px;">
<div class="result"></div>
<script>
//出现问题： 1、每次scroll都使动画反复触发，解决这个问题使用动画的 stop()，
// 这个方法主要是为了停止所有指定元素上运行的动画
// 两个参数,第一个参数删除队列动画，第二参数是让当前正在执行的动画立即完成，并且
// 重设show和hide的原始延时，调用回调函数,示例：
// $("#div").stop(); 停止当前动画，继续下一个动画
// $("#div").stop(true) 停止元素的所有的动画
// $("#div").stop(false, true) 让当前动画直接到达末状态，继续下一个动画
// $("#div").stop(true, true) 清楚所有动画，让当前动画直接到达末尾状态
// 到这一步能基本解决问题了，但是观察效果的时候发现进入动画的时候还是
// 有点卡顿的问题。主要原因在下面。
//
// 2、第二个问题也是因为scroll每次触发会引起上百次的操作，为了优化操作，网友提示
// 使用节流阀，不然scroll每次都在触发。节约资源，其中提供了
// https://segmentfault.com/a/1190000002764479 函数防抖与节流的优秀文章。
//
$(function(){
var fs = true;
$(window).scroll(function(event) {
if( $(window).scrollTop() > 50 ){
if(fs){
$(".result").stop().animate({
top: 0
},300);
fs = false;
}
}
else{
$(".result").stop().animate({
top: "-50px"
},300);
fs = true;
}
});
});
</script>
</body>
</html>
jquery 滚动条 scroll 和 animate出现的问题总结的更多相关文章
- jQuery检测滚动条(scroll)是否到达底部
一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height() 获取整个页面的高度 $(window).height() ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- 原创新闻 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- Perfect Scrollbar – 完美的 jQuery 滚动条插件
Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...
- 15个带示例的jQuery滚动条插件
1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...
- jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...
- IE & 自定义滚动条 & scroll
IE & 自定义滚动条 & scroll 请问这种在 IE 下的自定义滚动条,是如何实现的? https://fairyever.gitee.io/d2-admin-preview/# ...
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Linux下multipath多路径配置
一.什么是多路径 普通的电脑主机都是一个硬盘挂接到一个总线上,这里是一对一的关系.而到了有光纤组成的SAN环境,或者由iSCSI组成的IPSAN环境,由于主机和存 储通过了光纤交换机或者多块网卡及IP ...
- LSI MegaCli 命令使用2
#/opt/MegaRAID/MegaCli/MegaCli64 -LDInfo -Lall -aALL 查raid级别#/opt/MegaRAID/MegaCli/MegaCli64 -AdpAll ...
- C# DateTimePicker控件如何精确设置显示时分秒
项目中需要使用DateTimePicker空间选定当前的时间,但是这个空间默认显示到天,如何能让它显示具体的小时和分钟呢? 我们看到有一个Format属性,Format令我们想到格式化,有这几种格式 ...
- SpringBoot入门系列：第一篇 Hello World
跟随SpringBoot的文档(http://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/#boot-d ...
- MSSQL查询所有数据库表，指定数据库的字段、索引
--查询所有数据库USE mastergoselect [name] from [sysdatabases] order by [name] --查询其中一个数据库test,就可以得到这个数据库中的所 ...
- Windows免密码远程桌面
1.WinKey + R,在对话框中输入“gpedit.msc”,点“确定”: 2.展开:计算机配置--Windows设置--安全设置--本地策略--安全选项,找到“帐户:使用空白密码的本地账户只 ...
- 【转载】经典10道c/c++语言经典笔试题(含全部所有参考答案)
经典10道c/c++语言经典笔试题(含全部所有参考答案) 1. 下面这段代码的输出是多少(在32位机上). char *p; char *q[20]; char *m[20][20]; int (*n ...
- nuc950支持nand的mtd驱动的kernel修改
支持nand的mtd驱动的kernel修改 一.更新nanddriver文件 将新的nanddriver文件nuc900_nand.c放到kernel的drivers/mtd/nand目录下 二.修改 ...
- PHPCMS V9二次开发便捷自定义后台入口文件夹
phpcms v9二次开发便捷自定义后台入口文件夹 最新发布的phpcms v9由于采用了mvc的设计模式,所以它的后台访问地址是固定的,虽然可以通过修改路由配置文件来实现修改,但每次都修改路由配置文 ...
- JGraph
php中JPGraph入门配置与应用 什么是PHP JPGraph?专门提供图表的类库.它使得作图变成了一件非常简单的事情.生成非美工人士生成的图表.二维码算法. 到官方网站下载.docportal ...