<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>css透明度的变化</title>

		 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

		<style type="text/css">

			#header {

				position: fixed;

				width: 100%;

				height: 50px;

				top: 0;

				left: 0;

				background: rgba(36, 41, 44,0);//背景的初始值

				color: rgba(230,23,71);//文字的初始值

			}

		</style>

	</head>

	<body>

		<div>

			<div id="header">头部</div>

			<ul>

				<li>12345678910</li>

				<li>12345678910</li>

				//想看效果的话多赋值几个出来

			</ul>

		</div>

	</body>

	<script type="text/javascript">

		var header = document.getElementById('header');

		window.onscroll = function() {

			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//获取页面滚动的距离

			console.log(scrollTop)

			var opcaity = (scrollTop / 100 > 1) ? 1 : scrollTop / 100;//透明度的渐变取值

			header.style.background = 'rgba(36,41,44,' + opcaity + ')';

		         if(opcaity>0.2){

                             header.style.color= 'rgba(255,255,255,' + opcaity + ')';

                        }else{

                              header.style.color='rgba(230,23,71)' //往回滑的时候再给一个默认值

                        }

		}

	</script>

</html>

js 背景从无到黑的渐变 字从白到黑的渐变的更多相关文章

  1. 解决 APP启动白屏黑屏问题

    闪屏页简介 闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...

  2. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  3. 无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

    这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下. html+css部分: <style> #moocb ...

  4. 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  5. cojs 白树黑 黑树白 题解报告

    黑树白 首先如果不是强制在线,这个题用莫队+树状数组就可以在O(n*sqrt(n)*log(n))的时间内搞定 如果没有修改操作,可以直接上主席树就可以辣 我们考虑修改操作,某一个修改操作对于某一个查 ...

  6. SpringMVC结合ajaxfileupload.js实现文件无刷新上传

    直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...

  7. js背景自适应，学到了

    最近在做一个项目,要求实现背景自适应,何为背景自适应呢? 1.如果背景图高度不够,背景height是100%,background-size就应该是 100% auto 2.如果背景图宽度不够,背景w ...

  8. Lodop背景图无图片时显示放大叉号问题

    正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...

  9. Js实现京东无延迟菜单效果(demo) 慕课网

    先来理清思路:1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候,用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是,只执行一次处理 ...

随机推荐

  1. laravel5 文件上传

    <!DOCTYPE html><html lang="zh-CN"><head> {{--设置字符编码--}} <meta charset ...

  2. 【习题 4-8 UVA - 12108】Extraordinarily Tired Students

    [链接] 我是链接,点我呀:) [题意] [题解] 一个单位时间.一个单位时间地模拟就好. 然后对于每个人. 记录它所处的周期下标idx 每个单位时间都会让每个人的idx++ 注意从醒着到睡着的分界线 ...

  3. 【微软2017年预科生计划在线编程笔试 B】Tree Restoration

    [题目链接]:https://hihocoder.com/problemset/problem/1490 [题意] 给你一棵树的以下信息: 1.节点个数 2.给出树的每一层从左到右的顺序每个节点的编号 ...

  4. How many integers can you find

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  5. 洛谷 P2341 BZOJ 1051 [HAOI2006]受欢迎的牛

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...

  6. BZOJ——T 1053: [HAOI2007]反素数ant

    http://www.lydsy.com/JudgeOnline/problem.php?id=1053 Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6) ...

  7. POJ 2068

    就是必胜点与必败点的计算而已.计算每一种情况.设st[i][j]为在第i个人剩下j个石头时的情况,拿它转移后的情况比较.可以到达必败点,则当前为必胜点.若只能到达必胜点,则当前点为必败点. #incl ...

  8. Spark MLlib Deep Learning Deep Belief Network (深度学习-深度信念网络)2.2

    Spark MLlib Deep Learning Deep Belief Network (深度学习-深度信念网络)2.2 http://blog.csdn.net/sunbow0 第二章Deep ...

  9. 用Java做的类似皇家守卫战的游戏

    最近因为数据结构的课设缘故,所以用Java做了一款类似皇家守卫战(本人最钟情的一款PC兼手游的塔防游戏)的游戏.现在把这个游戏放出来,可以下载下来 玩耍 学习,代码中我也做了大量的注释.(运行游戏得带 ...

  10. Unity 使用C/C++ 跨平台终极解决方式（PC，iOS，Android，以及支持C/C++的平台）

    PC的事实上根本不用说,毕竟C#和C++交互的文章已经够多了,当然我自觉得经过几次折腾后.差点儿全部游戏须要到的操作我都掌握了(各种传參方法,各种坑,不懂的能够留言问.尽管基本上没人看.哈哈) 废话不 ...