HTML 鼠标滑动 页面的header背景从透明色变为黑色

要实现当鼠标滑动时,页面的header背景从透明色变为黑色,你可以使用JavaScript来监听滚动事件,并根据页面的滚动位置来改变header的背景颜色。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Header Background Change</title>
<style>
  header {
    width: 100%;
    height: 60px;
    background-color: transparent; /* 初始为透明背景 */
    transition: background-color 0.3s; /* 平滑过渡效果 */
    position: fixed; /* 固定在顶部 */
    top: 0;
    left: 0;
    z-index: 1000;
  }
</style>
</head>
<body>

<header>
  <!-- Header内容 -->
</header>

<script>
  // 获取header元素
  const header = document.querySelector('header');

  // 监听页面滚动事件
  window.addEventListener('scroll', () => {
    // 获取页面滚动的垂直位置
    const scrollHeight = window.pageYOffset;
    
    // 如果页面滚动超过0,将header背景变为黑色
    if (scrollHeight > 0) {
      header.style.backgroundColor = 'black';
    } else {
      // 如果页面滚动回到顶部,将header背景变回透明
      header.style.backgroundColor = 'transparent';
    }
  });
</script>

</body>
</html>
  • CSS样式定义了header的初始背景颜色为透明,并设置了背景颜色变化的过渡效果。
  • JavaScript监听了window对象的scroll事件,每次页面滚动时都会触发一个函数。
  • 在这个函数中,我们检查页面的垂直滚动位置(window.pageYOffset)。如果页面向下滚动超过0像素,我们将header的背景颜色设置为黑色。如果页面滚动回到顶部(即scrollHeight为0),我们将header的背景颜色设置回透明。
相关推荐
风若飞1 分钟前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑8 分钟前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia9 分钟前
如何找回Harbor密码
前端
码码哈哈0.09 分钟前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩10 分钟前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端
江城开朗的豌豆11 分钟前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了17 分钟前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆19 分钟前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
带娃的IT创业者20 分钟前
《Python Web部署应知应会》No3:Flask网站的性能优化和实时监测深度实战
前端·python·flask
weixin_4316004422 分钟前
使用 vue-virtual-scroller 实现高性能传输列表功能总结
前端·javascript·vue.js