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商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
随机推荐
- 云计算(6)--一些MapReduce的例子
例1:文件的字符串查找 这里reduce不做merge的工作,因为每行都是不一样的,不能merge. 与传统的grep程序相比,使用MapReduce可以加快处理,因为1它是Distributed的, ...
- Oracle LOB 大对象处理
LOB类型列主要是用来存储大量数据的数据库字段,最大可以存储4G字节的非结构化数据. 一.LOB数据类型分类 1.按存储数据的类型分: ①字符类型: CLOB:存储大量 单字节 字符数据. N ...
- 浅析Scrapy框架运行的基本流程
本篇博客将从Twisted的下载任务基本流程开始介绍,然后再一步步过渡到Scrapy框架的基本运行流程,其中还会需要我们自定义一个Low版的Scrapy框架.但内容不会涉及太多具体细节,而且需要注意的 ...
- vscode 输出面板字符编码问题
默认的输出中文会显示成乱码,需要在vscode内部的终端中输入 chcp 65001 缺点是需要每次打开vscode进行激活,另一种方式是在vscode的首选项中进行配置: "termina ...
- 一、RabbitMQ 基础理解
RabbitMQ,是一个使用 erlang 编写的 AMQP(高级消息队列协议)的服务实现,简单来说,就是一个功能强大的消息队列服务 概念理解: Producer: 消息发送者 RabbitMQ Vh ...
- redis登录及设置密码
redis服务开启 : ./redis-server /opt/redisConf/redis.conf 1,查询默认密码 127.0.0.1:6379> config get requirep ...
- bzoj 3420: Poi2013 Triumphal arch 树形dp+二分
给一颗树,$1$ 号节点已经被染黑,其余是白的,两个人轮流操作,一开始 $B$ 在 $1$ 号节点,$A$ 选择 $k$ 个点染黑,然后 $B$ 走一步,如果 $B$ 能走到 $A$ 没染的节点则 $ ...
- Codevs 4927 线段树练习5(分块)
4927 线段树练习5 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 有n个数和5种操作 add a b c:把区间[a,b]内的 ...
- 07_Kibana界面操作ES
Kibana界面的API操作ES 1.创建索引 1.1 指定分片数量和备份数量 1.2 创建默认 2. 查看索引 2.1 查看单个索引设置 2.2 查看所有索引设置 3.文档管理 3.1 添加文档 3 ...
- grafana+mysql忘记admin密码解决方法
通过mysql修改admin的密码. 我之前注册了一个用户,所以我直接复制lvusyy这个用户的密码即可. update user inner join (select password,salt,r ...