;(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. 从零开始开发一个Spring Boot Starter

    一.Spring Boot Starter简介 Starter是Spring Boot中的一个非常重要的概念,Starter相当于模块,它能将模块所需的依赖整合起来并对模块内的Bean根据环境( 条件 ...

  2. am335x system upgrade rootfs using yocto make rootfs(十二)

    1      Scope of Document This document describes how to make am335x arago rootfs using ycoto project ...

  3. vue vue-cli中引入全局less变量的方式

    我们经常用less定义一些全局变量,比如主题的颜色,为了避免在每个组件中引用我首先尝试放在main.js中,发现并不起作用... 先看vue-cli2.x 版本如何解决 1.安装; npm insta ...

  4. Linux下搭建iSCSI共享存储的方法 TGT 方式 CentOS6.9系统下

    iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够在诸如高速 ...

  5. 10分钟教你用python 30行代码搞定简单手写识别!

    欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 手写笔记还是电子笔记好呢? 毕业季刚结束,眼瞅着2018级小萌新马上就要来了,老腊肉小编为了咱学弟学妹们的学习,绞尽脑汁准备编一套大学秘籍, ...

  6. UOJ449. 【集训队作业2018】喂鸽子 [概率期望,min-max容斥,生成函数]

    UOJ 思路 由于最近养成的不写代码的习惯(其实就是懒),以下式子不保证正确性. 上来我们先甩一个min-max容斥.由于每只鸽子是一样的,这只贡献了\(O(n)\)的复杂度. 现在的问题转化为对于\ ...

  7. Pytest权威教程05-Pytest fixtures:清晰 模块化 易扩展

    目录 Pytest fixtures:清晰 模块化 易扩展 Fixtures作为函数参数使用 Fixtures: 依赖注入的主要例子 conftest.py: 共享fixture函数 共享测试数据 生 ...

  8. Pytest权威教程21-API参考-02-标记(Marks)

    目录 标记(Marks) pytest.mark.filterwarnings pytest.mark.parametrize pytest.mark.skip pytest.mark.skipif ...

  9. Java SpringBoot注解方式开启异步支持

    package task.demo.controller; import org.springframework.beans.factory.annotation.Autowired; import ...

  10. 根据数据文件自定义边界条件timeVaryingUniformFixedValue【转载】

    转载自:http://blog.sina.com.cn/s/blog_e256415d0101nf9j.html 在OpenFOAM中,可以创建数据文件,自定义边界条件. 下面的例子读取outletP ...