移动端 = 动态改变头部透明度

// 利用函数自执行 可以避免全局变量的污染，让代码模块化
// 加分号的目的是为了代码合并的时候避免报错
;(function(){//需求：在滚动的时候动态改变jd-header的透明度//思路：//（1）主要的逻辑在scroll事件里面完成//（2）比例关系：不断被卷曲的高度/目标高度（自己设定的）= 不断改变的透明度/0.8var jdHeader = document.querySelector('.jd-header');// 自己设定的目标高度var maxTop = 200;// 注册scroll事件window.addEventListener('scroll', function(){// 获取不断被卷曲的高度var scrollTop = document.body.scrollTop;// 通过被卷曲的高度去影响透明度if(scrollTop > maxTop){jdHeader.style.background = 'rgba(201, 21, 35,0.8)';}else{jdHeader.style.background = 'rgba(201, 21, 35,'+ scrollTop/maxTop*0.8 +')';}})
})()
复制代码

移动端 = 动态改变头部透明度相关推荐

移动端-动态改变字体大小
// 动态改变字体大小 function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.documentElement.c ...
div背景透明度动态改变的效果
目标: 使用定时器实现div背景色的透明度动态改变注意:这里没有进行兼容处理,别使用低版本的ie游览器!!! 代码: <!doctype html> <html><he ...
jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...
glog 设置日志级别_如何动态改变日志级别
前言关于日志级别,大部分项目可能都设置为info级别,当然也可能有一些追求性能或者说包含很多敏感信息的项目直接将级别设置为warn或者error:这时候如果项目中出现一些未知异常,需要用到很详细的日 ...
WPF动态改变主题颜色
国内的WPF技术先行者周银辉曾介绍过如何动态改变应用程序的主题样式,今天我们来介绍一种轻量级的改变界面风格的方式--动态改变主题色. 程序允许用户根据自己的喜好来对界面进行配色,这种技术在很多软件中都 ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...
如何动态改变日志级别
前言关于日志级别,大部分项目可能都设置为info级别,当然也可能有一些追求性能或者说包含很多敏感信息的项目直接将级别设置为warn或者error:这时候如果项目中出现一些未知异常,需要用到很详细的日 ...
vue中设置html的fontsize,vue中rem布局使用js动态改变fontsize
rem布局原理:使用js动态改变html的字体大小+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备能够正常显示. (function (doc, win) { var ...

移动端 = 动态改变头部透明度

移动端 = 动态改变头部透明度相关推荐

最新文章

热门文章