回顾scroll
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<script src="jquery-1-12-1.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.header{
width: 100%;
height: 50px;
position: fixed;
left: 0;
top: -50px;
background:red;
}
body{
height: 3000px;
}
</style>
<body>
<div class="header"> </div>
</body>
<script>
$(function(){
var flagdnow=true;
var flagup=true;
window.onscroll = function(){
var scroll = $(document).scrollTop();
if(scroll >= 400){
if(flagdnow){
$(".header").animate({top:0})
flagdnow=false;
flagup=true;
}
}
else{
if(flagup){
$(".header").animate({top:"-50px"})
flagdnow=true;
flagup=false;
}
}
}
})
</script>
</html>
回顾scroll的更多相关文章
- JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾
页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...
- offset系列,client系列,scroll系列回顾
一 scroll系列属性 ——滚动
- Python之路【第十四篇】前端补充回顾
布局和事件 1.布局 首先看下下面的图片: 上面的内容都是居中的,怎么实现这个效果呢,第一种方法是通过float的方式,第二种是通过“div居中的方式” 第一种方式不在复述了,直接看第二种方式: 1. ...
- iOS回顾笔记（04） -- UIScrollView的基本使用详解
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- VS2010/MFC编程入门之二十六（常用控件：滚动条控件Scroll Bar）
回顾上一节,鸡啄米讲的是组合框控件Combo Box的使用.本节详解滚动条控件Scroll Bar的相关内容. 滚动条控件简介 滚动条大家也很熟悉了,Windows窗口中很多都有滚动条.前面讲的列表框 ...
- 前端知识点回顾——HTML，CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
- Elasticsearch系列---搜索执行过程及scroll游标查询
概要 本篇主要介绍一下分布式环境中搜索的两阶段执行过程. 两阶段搜索过程 回顾我们之前的CRUD操作,因为只对单个文档进行处理,文档的唯一性很容易确定,并且很容易知道是此文档在哪个node,哪个sha ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
随机推荐
- PMD 编译 语法分析 词法分析 抽象语法树
编译原理 163 课堂 http://mooc.study.163.com/learn/-1000002001?tid=1000003000#/learn/content?type=detail&am ...
- cocos2dx for lua 截屏功能
cocos2dx的utils类中包含截图功能,使用方法如下: cc.utils:captureScreen(function(successed,outputFile)--第一个参数是截图成功或者失败 ...
- PHPStorm+XDebug进行调试图文教程
这篇文章主要为大家详细介绍了PHPStorm+XDebug进行调试图文教程,内容很丰富,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 另外如果你们加载不出图片,另外的地址:转载地址https:// ...
- 【TCP/IP】【网络基础】网页访问流程
引用自 <鸟哥的linux私房菜> http://cn.linux.vbird.org/linux_server/0110network_basic_1.php#ps7 那 TCP/IP ...
- GOPATH和GOROOT
安装指定版本golang apt-get purge golang* //删除之前安装的文件 add-apt-repository ppa:evarlast/golang-1.8 apt-get up ...
- Java-basic-4-数据类型
Number类 装箱:将内置数据类型作为包装类对象使用:拆箱:相反 public class test{ public static void main(String args[]) { // box ...
- 【转载】美国人教你这样用Google
大前提:英文Google→www.google.com 第一篇 在搜索框上输入:“indexof/”inurl:lib 再按搜索你将进入许多图书馆,并且一定能下载自己喜欢的书籍. 在搜索框上输入:“i ...
- linux中的部分宏
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- PHP如何利用sleep实现 输出->等待->输出
sleep()函数一般用在暂停上,但是一个PHP一旦有了sleep,其他的输出(print,echo)就都要等待sleep()函数的完成,这是因为缓冲区,这里有详细解释 在这里不赘述,而如果要实现先输 ...
- ASP.Net教程系列：多线程编程实战（一）
Web开发中使用多线程可以增强用户体验,尤其是多用户.多任务.海量数据和资源紧张的情况下.所以我们的ASP.Net教程设立多线程编程实战专题.下面这些代码范例都是入门级的,希望对对大家学习ASP.Ne ...