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揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...
随机推荐
- 核心J2EE模式 - 截取过滤器
核心J2EE模式 - 截取过滤器 背景 呈现层请求处理机制接收许多不同类型的请求,这些请求需要不同类型的处理.一些请求被简单转发到适当的处理程序组件,而其他请求必须在进一步处理之前进行修改,审核或未压 ...
- KEIL中逻辑分析仪的使用
本学期开了门嵌入式的课程,在实验课上用到了一款基于ARM Cortex-M3处理器的LPC1768的实验板.本来这种课程我觉得应该可以学到很多东西,可是我发现实验课上老师基本只是讲了xx实验课的要求, ...
- lua 模块
lua 模块 概述 lua 模块类似于封装库 将相应功能封装为一个模块, 可以按照面向对象中的类定义去理解和使用 使用 模块文件示例程序 mod = {} mod.constant = "模 ...
- Why we don’t recommend using List<T> in public APIs
不推荐List<T>做API原因有如下两点:1.首先List<T> 设计之初就没有设计成可扩展的,我们不能重新其任何方法.这就意味着,我们操作List<T>的时候却 ...
- 一个例子简要说明include和require的区别
先编辑command.php文件 echo 'hello'.PHP_EOL; 然后编辑console.php文件 for($i=1;$i<=3;++$i){ require 'command1. ...
- js解析器(重要!)
JavaScript有"预解析"的特性,理解预解析是很重要的,不然在实际开发中可能会遇到很多无法解析的问题,甚至导致程序bug的存在. #js预解析执行过程: 预解析:(全局作用域 ...
- 记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
- spring注解读取json文件
开发时候在接口没有提供的时候,可以用json文件提前模拟接口数据 1.service层 package com.syp.spring.service; import java.io.File; imp ...
- IOS(一) 基础控件的介绍以及使用
IOS的界面的制作,相对于Android来说 简洁了很多,虽然创建布局的方式都是两种(代码创建.布局文件) 但是Android中的xml布局文件在某些方面也属于代码创建,因为自己使用到得每一个属性 都 ...
- 你真的用好了Python的random模块吗?
random模块 用于生成伪随机数 源码位置: Lib/random.py(看看就好,千万别随便修改) 真正意义上的随机数(或者随机事件)在某次产生过程中是按照实验过程中表现的分布概率随机产生的,其结 ...