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商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
随机推荐
- Spring如何给静态变量注入值
Common.java是一个工具类. Spring无法直接给静态变量注入值,因为静态变量不属于对象,只属于类,也就是说在类被加载字节码的时候变量已经初始化了,也就是给该变量分配内存了,导致spring ...
- [bzoj 3701] Olympic Games (莫比乌斯反演)
题目描述 给出n,m,l,r,modn,m,l,r,modn,m,l,r,mod 表示一个(n+1)∗(m+1)(n+1)*(m+1)(n+1)∗(m+1)的格点图,求能够互相看见的点对个数对modm ...
- docker:设置国内镜像仓储
修改docker仓储镜像 vi /etc/docker/daemon.json 增加下面数据 { "registry-mirrors": ["https://xwx6wx ...
- 使用VS创建三层架构的项目
使用VS创建三层架构的项目 1.打开VS软件: 2.创建新项目: 3.创建新项目打开后选择SAP的选项点击创建{注:上面还有一个和这个相似的项目创建:看清楚在选择: 4.创建后改下名字,框架如果不是3 ...
- 16 | “order by”是怎么工作的?
在你开发应用的时候,一定会经常碰到需要根据指定的字段排序来显示结果的需求.还是以我们前面举例用过的市民表为例,假设你要查询城市是“杭州”的所有人名字,并且按照姓名排序返回前1000个人的姓名.年龄. ...
- Laravel $request 常用方法
request的方法 描述 input('key','default-value') 此方法可以获取get请求所带来的特定参数的值,如果没有该参数可以提供默认值 all() 此方法获取get请求的所有 ...
- CH5101 LCIS(最长公共上升子序列) 题解
每日一题 day16 打卡 Analysis 设F[i,j]表示A[1..i]与B[1..j]并且以B[j]结尾的两段最长公共上升子序列,那么我们可以发现这样的转移 (1)A[i]==B[j]时 F[ ...
- .pro文件中设置版本等信息
VERSION = 1.2.3 QMAKE_TARGET_PRODUCT = 产品名称QMAKE_TARGET_COMPANY = 公司QMAKE_TARGET_DESCRIPTION = 文件描述Q ...
- faebdc的烦恼 莫队
faebdc的烦恼 莫队 题面 思路 有点难想的莫队. 首先我们肯定要一个cnt[i]记录难度i出现的次数,但是我们发现每次删去一个难度后,如果那个难度的个数恰好是当前最多次数,我们就可能要更新一下答 ...
- CRNN网络结构详解
目录 一. CRNN概论 简介 网络 二. CRNN局部之特征提取 三. CRNN局部之BLSTM 四. CRNN局部之CTC 关于CTC是什么东西? CTC理论基础 五. 参考文献 一. CRNN概 ...