;(function($){
$.fn.extend({
/*
元素根据滚动条位置自定义吸顶插件
@defaultTop 初始化top位置
@startTop 开始滚动和回复原样的位置
@demo
var ensureTop = $('#ensure').offset().top;
$('#columnFloat').setScroll({
defaultTop: ensureTop,//需要设置的默认起始top位置
startTop: ensureTop//从什么位置开始执行事件
});
*/
setScroll:function(opt){
if($(this).length<1 || !opt.startTop){return;}
var isIE6 = !-[1,]&&!window.XMLHttpRequest,
Timmer= null,
$this = $(this),$win = $(window),
startTop = opt.startTop;
/*初始化top位置*/
if(opt.defaultTop){$this.css('top',opt.defaultTop);} /*开始滚动和回复原样的位置*/
$win.bind('scroll',function(){
if(Timmer){clearTimeout(Timmer);}
Timmer = setTimeout(function(){
if($win.scrollTop()>=startTop){/*开始执行事件*/
if(isIE6){
$this.css({'position':'absolute','top':$win.scrollTop()});
}else{
$this.css({'position':'fixed','top':0});
}
}else{
$this.css({'position':'absolute','top':opt.startTop});
}
},40); });
}
});

  

【JQuery插件】元素根据滚动条位置自定义吸顶效果的更多相关文章

  1. 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...

  2. 自定义tab吸顶效果一(原理)

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  3. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  4. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  5. js之吸顶效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  7. tabControl组件的吸顶效果

    最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...

  8. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  9. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

随机推荐

  1. 洛谷 P816 忠诚 题解

    每日一题 day28 打卡 Analysis 这道题用线段树维护区间最小值很简单,因为没有修改所以连lazy_tag都不用,但是这道题可以用树状数组维护区间最小值,非常骚气. 线段树代码: #incl ...

  2. BlockingCollection<T> 类实现 列队操作

    官方文档 为实现 IProducerConsumerCollection<T> 的线程安全集合提供阻塞和限制功能. 通过 BlockingCollection<T> 实现列队调 ...

  3. Oracle instr() 字符查找函数

    instr()函数的格式  (俗称:字符查找函数) 格式一:instr( string1, string2 )    /   instr(源字符串, 目标字符串) 格式二:instr( string1 ...

  4. AtCoder Grand Contest 013题解

    传送门 \(A\) 先把相同的缩一起,然后贪心就可以了 //quming #include<bits/stdc++.h> #define R register #define fp(i,a ...

  5. SVN优于CVS之处

    1.原子提交.一次提交不管是单个还是多个文件,都是作为一个整体提交的.在这当中发生的意外例如传输中断,不会引起数据库的不完整和数据损坏. 2.重命名.复制.删除文件等动作都保存在版本历史记录当中. 3 ...

  6. 第2组 团队Git现场编程实战

    目录 组员职责分工(1 2分) github 的提交日志截图(2 1分) 程序运行截图(3 3分) 程序运行环境(4 1分) GUI界面(5 5分) 基础功能实现(6 10分) 鼓励有想法且有用的功能 ...

  7. FCS省选模拟赛 Day1

    Description  Solution T1 shopping 目测是插板法乱搞一下 发现题解写的是容斥dp: \[ ans = \sum_i (-1)^ig[i] \] \(g[i]\)表示的有 ...

  8. 急急急,tp5的验证码不显示

    本地环境phpstudy,使用composer安装tp5,按照看云<ThinkPHP5.0完全开发手册>验证码配置,就是不显示验证码. 使用:<div>{:captcha_im ...

  9. 绕流振动UDF【转载】

    宏DEFINE_GRID_MOTION用来移动任意边界和流体区域内的网格节点.它提供了对节点和网格最大限度的操作,可以将刚体运动.变形和相对运动等结合起来.但是使用此UDF时,每一个时间步都必须执行. ...

  10. 和小哥哥一起刷洛谷(6) 图论之SPFA算法

    关于\(spfa\) spfa伪代码: void spfa(s){ 最短路数组全部设为无限大; 队列 q; 起点s入队; s离s的距离设为零; while(队列非空){ 取出队首;弹出队首; for( ...