随着页面滚动，标题栏颜色变化
随着页面滚动，标题栏颜色变化
作者：一个div
页面头部标题一开始是透明状态，，随着屏幕滚动，颜色慢慢变深，到一定高度停止变化
给window 绑定滚动事件，获取当前滚动的高度
当前高度 * 最大透明度 / 停止变色高度 = 透明度
// 标题颜色改变
var banner = document.querySelector('.banner'); // 获取滚动停止位置的元素
var bannerHeight = banner.offsetHeight; // 获取滚动停止位置的元素据top的高度
var header = document.querySelector('.header'); // 获取头部
// 给window注册事件
window.onscroll = function() {
// 获取当前滚动的高度
var scrollTop = document.documentElement.scrollTop;
//计算当前透明度
var opacity = scrollTop * 0.85 / bannerHeight;
if (opacity >= 0.85) {
opacity = 0.85;
}
// 写入样式
header.style.background = 'rgba(201, 21, 35, ' + opacity + ')';
}
作者：一个div
