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控制元 ...
随机推荐
- #define中 #与##的神奇用法
本文整理自csdn. #define f(a,b) a##b #define d(a) #a #define s(a) d(a) void main( void ) { puts(d ...
- 英文单词cipher 和password的区别，用法有什么不同，
['saɪfə(r)] cipher 指一套密码系统,比如电影<风声>中破译的那个系统叫cipher:password 则指进入的指令,比如你的qq密码,电脑密码等叫password.总之 ...
- scanf是怎么从标准输入读取数据的
scanf是从标准输入读取数据的 假设现在标准输入中的数据是123456 int a; 而我scanf("%d",&a); 会把123456转化为数字然后存入到a中. 如果 ...
- "分辨率"到底是个什么概念？它和DPI之间是什么关系？
"分辨率"到底是个什么概念?它和DPI之间是什么关系? 分辨率:显示分辨率(屏幕分辨率)是屏幕图像的精密度,是指显示器所能显示的像素有多少.由于屏幕上的点.线和面都是由像素组成的, ...
- [C++] Memory_stack_heap
STACK_HEAP_MEMERY_MAP NOTICE: For p1 , where is the address of p1 ?(0x200400) IN STACK For p1 , wher ...
- Java 程序员最喜欢的 11 款免费 IDE 编辑器
Java开发人员需要花费大量的时间埋头于Java代码中,使用各种不同的IDE(Intergrated Development Environment)来开发Java代码,所以下面我将为大家介绍11个不 ...
- 06 Counting Point Mutations
Problem Figure 2. The Hamming distance between these two strings is 7. Mismatched symbols are colore ...
- Hadoop（HDFS、YARN、HBase、Hive和Spark等）默认端口表
端口 作用 9000 fs.defaultFS,如:hdfs://172.25.40.171:9000 9001 dfs.namenode.rpc-address,DataNode会连接这个端口 50 ...
- 设计模式18：Observer 观察者模式（行为型模式）
Observer 观察者模式(行为型模式) 动机(Motivation) 在软件构建过程中,我们需要为某些对象建立一种“通知依赖关系”——一个对象(目标对象)的状态发生改变,所有依赖对象(观察者对象) ...
- 深入理解java虚拟机（五）垃圾收集器
垃圾收集器 垃圾收集器是垃圾收集算法的具体实现.Java规范对垃圾收集器的实现没有做任何规定,因此不同的虚拟机提供的垃圾收集器可能有很大差异.HotSpot虚拟机1.7版本使用了多种收集器.如下图. ...