js实现div吸顶效果
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var TIMER;//定义全局变量
$(window).scroll( function() {
clearTimeout(TIMER);//必须要有这句
if( $(document).scrollTop() > 0 ){
TIMER = setTimeout(function(){
$("#aaa").addClass("abc");console.log($(document).scrollTop());
},100);
}else{
TIMER = setTimeout(function(){
$("#aaa").removeClass("abc");
},100);
}
});
});
</script>
<style type="text/css">
html,body{margin:0;padding:0;}
#aaa{width:100%;height:40px;line-height:40px;background:#3399cc;}
.abc{position:fixed;left:0;right:0;top:0;}
</style>
<div id="aaa">aaaaaaa</div>
js实现div吸顶效果的更多相关文章
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- js之吸顶效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- Html吸顶效果
Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...
- better-scroll之吸顶效果巨坑挣扎中
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...
- [RN] React Native 头部 滑动吸顶效果的实现
React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- tabControl组件的吸顶效果
最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...
- 自定义tab吸顶效果一(原理)
PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
随机推荐
- 005_simulink建立条件子系统
1. 条件执行子系统 a) 使能子系统:是控制信号大于零时执行的子系统.在控制信号穿越零点由负变正的时步点上,使能子系统开始执行.只要子系统的控制信号保持正值,使能子系统就会保持在执行的状态 b) ...
- 棋盘n皇后问题-递归
题目:在n*n的棋盘上,放n个皇后,互不攻击(不可在同行/列/对角线) 分析:将棋盘抽象成一个一维数组[0,1,2......,n*n-1],x=~~(i/n)取整,y=i%n; de ...
- 为什么深度(Ubuntu)Linux挂载NTFS分区只读不可写?
如前所述,经扩展,Dell Vostro 1520笔记本电脑拥有了两块硬盘. 本着旧物利用的心思,在其中一块256GiB固态盘上安装了深度linux,同时挂载另一块2TiB机械盘作为存储盘. 这块 ...
- 使用DRBD+KEEPALIVED来实现NFS高可用
目录 一 DRBD介绍 二 DRBD的模式 三 DRBD的同步协议 四 实验环境 五 安装配置 关于脑裂(split-brain)处理 一 DRBD介绍 DRBD(Distributed Replic ...
- Jetbrain全栈最新激活方法(2019年及之前所有新老版本)
随着2019版的到来,之前的永久激活教程也不生效了,所以今天为大家带来一种新的永久激活方式. 1.下载新版破解补丁 破解补丁传送门提取码:3e8j 点击传送门下载补丁文件 jetbrains-agen ...
- meshing-划分圆柱结构化网格
原视频下载地址:https://yunpan.cn/cqjeckrzEpVkY 访问密码 eb5d
- 微信小程序 wxParse插件显示视频
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName) 方法里 var node = { node: 'element', tag: tag, } ...
- ubuntu video and audio
推荐你直接安装ubuntu-studio系统.里面有默认安装了很多多媒体软件,主要集中在4个方面1.音频编辑:Jack, Ardour, Audacity, Qtractor. Hydrogen, Y ...
- Hibernate 关系配置
表之间关系 1. 一对多 一个部门有多个员工,一个员工只能属于某一个部门 一个班级有多个学生,一个学生只能属于一个班级 2. 多对多 一个老师教多个学生,一个学生可以被多个老师教 一个学生可以先择多门 ...
- Python 死循环
while True: try: x=int(input("Please enter a number:")) break except ValueError: print(&qu ...