javascript滚动到大于一定距离显示隐藏
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
* {
margin: 0;
padding: 0;
} body {
max-width: 640px;
margin: 0 auto;
} .box {
display: block;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #ccc;
border-radius: 20px;
background-color: #DC7E2D;
margin-top: 30px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9
}
</style>
</head> <body>
<div style="height:300px;background-color: #3045A4"></div>
<div style="height:100px;background-color: #3E41D6"></div>
<div style="height:300px;background-color: #645FB1"></div>
<div style="height:200px;background-color: #F18733"></div>
<a href="javascript:;" class="box" id="btn">按钮</a> <script>
window.onscroll = function() {
var btn = document.getElementById('btn');
var scrollTop = document.body.scrollTop || (document.documentElement && document.documentElement.scrollTop);
if (scrollTop >=300) {
btn.style.display = 'none';
} else{
btn.style.display = 'block';
}
}
</script>
</body> </html>
效果图:
javascript滚动到大于一定距离显示隐藏的更多相关文章
- javascript进行百度换肤 和显示隐藏一个窗口的操作
简单的运用javascript来进行百度换肤的操作 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 利用JavaScript的if语句判断元素显示隐藏
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- iframe的滚动栏问题:显示/隐藏滚动栏
iframe 问题2008-01-22 16:37****** 显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...
- jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)
1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...
随机推荐
- DEV 打印功能
Dev13.1 用的是DocumentViewer,上面的一排按钮,是自动生成的,生成方法为:加了DocumentViewer后,控件右上角有个小三角,点一下,在弹出框中选择"Create ...
- spring与mybatis
- if __name__ == '__main__'的作用和原理
最简单的理解就是这样: __name__ 是当前模块名,当模块被直接运行时,模块名为 __main__. 所以 if __name__ == '__main__' 这句话的意思就是当前模块被直接运行时 ...
- python 数值计算库
pip install numpy pip install matplotlib pip install sklearn yum -y install tkinter pip install scip ...
- go_数组
go语言中数组是值类型 [10]int 和 [20]int 是不同类型,不能用作参数传递 调用func f(arr [10]int)会拷贝数组 go语言一般不用数组用切片slice package m ...
- Spark Streaming原理简析
执行流程 数据的接收 StreamingContext实例化的时候,需要传入一个SparkContext,然后指定要连接的spark matser url,即连接一个spark engine,用于获得 ...
- 【Unity】Collider随骨骼动画运动
Collider位置和角色的动作不一致会导致Mesh互相镶嵌,让游戏失真. 想象一扇门的Collider没随它打开的动画移动,结果就是你看着门开着却穿不过去. 而我遇到的情况是: 角色在执行跑 ...
- linux zip解压缩中文乱码
这里提供两个解决方案: 1.python处理下:https://gist.github.com/wangjiezhe/7841a350983a147b6d7e 2.java的zip4j:http:// ...
- go语言的特殊变量 iota
iota,是go语言的特殊常量,可以认为是一个可以被编译器修改的常量. 在每一个const关键字出现时,被重置为0,然后在下一个const出现之前,每出现一次iota,其所代表的数字会自动增加1. 来 ...
- 3d点云与cad模型
https://stackoverflow.com/questions/19000096/match-3d-point-cloud-to-cad-model