scroll抖动问题
参考软文: http://www.cnblogs.com/coco1s/p/5499469.html
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
}else{
timeout = setTimeout(func, wait);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
var wHeight = $(window).scrollTop();
var imgTop = $("p").offset().top;
if(wHeight > imgTop){
$("img").addClass("posFixed");
}else{
$("img").removeClass("posFixed");
}
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,300,1000));
scroll抖动问题的更多相关文章
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- (转)解决bootstrap 模态框的页面抖动
使用bootstrap时,往往会出现页面抖动的效果,使得用户体验十分不友好. Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置bod ...
- Bootstrap3-技巧之解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
Bootstrap为了让所有的页面(这里指内容溢出和不溢出)显示效果一样,采取的方法如下: 当Modal显示时,设置body -- overflow:hidden;margin-right:15px; ...
- CSS 控制Html页面高度导致抖动问题的原因
CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...
- 高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 前端高性能滚动 scroll 及页面渲染优化
前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...
随机推荐
- 【从无到有】JavaScript新手教程——1.简介、变量和运算符
今天带大家来学习一下在网页制作过程中很常用的JavaScript(简称JS). 一.JS的作用: 表单验证,减轻服务端的压力 添加页面动画效果 动态更改页面内容 Ajax网络请求 二.[使用JS的 ...
- html基础认识,高手别看
HTML5是一种用于在万维网上构建和呈现内容的符号言语.它是HTML规范的第五和当时版别.它是由万维网联盟(W3C)在十月发布的2014 [ 2 ] [ 4 ]和最新的多媒体支持进步言语,一起坚持它简 ...
- 老司机带你开飞机 一: mssql on linux 安装指导
通常在本机开发环境中需要搭建所有的服务,还要修改本地的hosts,实在是不胜其烦.如今有了docker,完全不用污染本地环境,且看老司机带你搭建一个asp.net core的开发环境集群.愿你走出虚拟 ...
- Laravel 中使用 Redis 数据库
一.前言 Redis 是一个开源高效的键值对存储系统,它通常用作为一个数据结构服务器来存储键值对,它可以支持字符串.散列.列表.集合.有序集合. 1. 安装 predis/predis 在 Larav ...
- HTC开放Vive Tracker代码啦!
(52VR网2017年5月2日)HTC正在为工作室创建的Vive Tracker项目发布教程和项目文件,作为VR开发人员的新资源. 该公司希望能够让更多的开发者能够在开发Vive VR耳机时制作自己的 ...
- 蓝桥杯- 煤球数目-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- Linux学习之要点必备
在本节课中我将会带领大家秒懂linux命令 要点一:常见基本命令格式 命令名称+选项+参数 例如:#mkdir -r /var/ruofeng/001/ 我们通过逐级创建目录方式解释这个例子,mkdi ...
- 基于Struts2,Spring4,Hibernate4框架的系统架构设计与示例系统实现
笔者在大学中迷迷糊糊地度过了四年的光景,心中有那么一点目标,但总感觉找不到发力的方向. 在四年间,尝试写过代码结构糟糕,没有意义的课程设计,尝试捣鼓过Android开发,尝试探索过软件工程在实际开发中 ...
- 关于BSTR和SysStringLen方法的简单研究
英文的我编不下去了,所以还是先写个中文的吧, 之前遇到了SysStringLen求Bstr长度不正确的问题,试验了几次都不行的情况下我觉得可能是这个方法的bug,所以就没管. 大概的情况是这样: in ...
- java线程(四)
java5线程并发库 线程并发库是JDK 1.5版本级以上才有的针对线程并发编程提供的一些常用工具类,这些类被封装在java.concurrent包下. 该包下又有两个子包,分别是atomic和loc ...